CSS中四分之一圆的写法

来源：互联网发布：淘宝达人淘客佣金设置编辑：程序博客网时间：2024/04/29 02:55

关于百度前端学院中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；

效果如下图：

0 0