css中怎么制作四分之一圆

327 阅读 0 评论 216 点赞

我是靠谱客的博主个性大侠，这篇文章主要介绍css中怎么制作四分之一圆，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，提到制作圆，就会想到border-radius属性。

该属性可以将一个宽高相等的正方形元素，变成一个圆

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>
登录后复制

但有时我们不需要一个整圆，只需要一部分，利用四分之一圆，这要怎么做？

还是利用border-radius属性，设置元素一个圆角的值为宽或高值，其他3个圆角的值为0即可：

border-radius: 50px 0 0 0;
登录后复制

border-radius: 0 50px 0 0;
登录后复制

border-radius: 0 0 50px 0;
登录后复制

border-radius: 0 0 0 50px;
登录后复制

（学习视频分享：css视频教程）

以上就是css中怎么制作四分之一圆的详细内容，更多请关注靠谱客其它相关文章！

以上就是个性大侠最近收集整理的关于css中怎么制作四分之一圆的全部内容，更多相关css中怎么制作四分之一圆内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。