css中怎么制作四分之一圆

154 阅读 0 评论 102 点赞

我是靠谱客的博主个性大侠，最近开发中收集的这篇文章主要介绍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中怎么制作四分之一圆所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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