第一次写简书，选择一个简单一些的知识尝试一下ʘᴗʘ
很多时候我们会选择用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; }
差不多就是这些，想到再补(ฅ>ω<*ฅ)
