第一次寫簡書，選擇一個簡單一些的知識嘗試一下???
很多時候我們會選擇用css繪圖，其中有一個十分重要的屬性叫“border-radius”，它可以實現(xiàn)類似圓角的效果，根據(jù)W3C的說法，它的語法如下：
border-radius: 1-4 length|% / 1-4 length|%;
| 值 | 描述 |
|---|---|
| length | 定義圓角的形狀 |
| % | 以百分比定義圓角的形狀 |
一個矩形分為四個角，
1.當(dāng)border-radius后面只有一個數(shù)字時：
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.當(dāng)border-radius后面有兩個數(shù)字時：
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.當(dāng)border-radius后面有三個數(shù)字時：
top-left取第一個值，top-right和bottom-left取第二個值，bottom-right取第三個值
4.當(dāng)border-radius后面有四個數(shù)字時：
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; }
差不多就是這些，想到再補(?>ω<*?)
