css下border-radius的使用

第一次写简书，选择一个简单一些的知识尝试一下ʘᴗʘ

---

很多时候我们会选择用css绘图，其中有一个十分重要的属性叫“border-radius”，它可以实现类似圆角的效果，根据W3C的说法，它的语法如下：

border-radius: 1-4 length|% / 1-4 length|%;

值	描述
length	定义圆角的形状
%	以百分比定义圆角的形状

一个矩形分为四个角，

1.当border-radius后面只有一个数字时：

top-left、top-right、bottom-left和bottom-right都相等

<div id="circle"></div>

#circle{ width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
等价于：
border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-right-radius:50px; border-bottom-left-radius:50px;
效果是这样的：

---

2.当border-radius后面有两个数字时：

top-left和bottom-right都取第一个值，top-right和bottom-left都取第二个值。

例如：

<div id="oval"></div>

#oval{ width: 100px; height: 100px; background: red; border-radius: 100px/50px; }
效果如下：

把oval的width改为200px时，效果是一个椭圆。

3.当border-radius后面有三个数字时：

top-left取第一个值，top-right和bottom-left取第二个值，bottom-right取第三个值

4.当border-radius后面有四个数字时：

5.还有一些别的情况一下举例说明：

（1）ex01效果如下：

<div id="ex01"></div>

#ex01{ width: 200px; height: 200px; background: #1FAF9F; border-radius: 0px 50px 72px/30px 50px 20px; }

（2）ex02效果如下：

<div id="ex02"></div>
#ex02{ width: 200px; height: 200px; background: #1FAF9F; border-radius: 40px 60px 80px / 70px 60px; }

差不多就是这些，想到再补(ฅ>ω<*ฅ)