CSS中四分之一圆的写法

关于百度前端学院中task4四分之一圆的画法（基于CSS中画圆角的方法）

方法一：

设置宽高为100px，border-radius设置为50%（当然这里也可以设置为50px）

width:100px;height:100px;border-radius:50%;

因为使用的半径为边长的一半，故四个圆角的圆心重合在正方形对角线的交点处。因此做出来的是一个整圆，如要要显示为四分之圆，可以用相对或者绝对定位偏移一定的数值，将圆心定位到矩形顶角。而关键的地方就是要将超出矩形的四分之三圆隐藏，方法就是overflow：hidden；。

方法二：

border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值： （本段摘抄自http://www.studyofnet.com/news/276.html） .demo { border-radius:10px 20px 30px 40px; } 等价于： .demo { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; }  效果：

如上所述，要想设置为四分之一圆，则只用设置一个圆角的值即可。

具体设置方法：

左上的四分之一圆设置为：border-bottom-right-radius：50px；

右下的四分之一圆设置为：border-top-left-radius：50px；

效果如下图：

总结

以上是生活随笔为你收集整理的CSS中四分之一圆的写法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。