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；

效果如下图：