css3畫花瓣 border radius的妙用

css3中新增的 border-radius 屬性在前端開發工作中，一般是還有從來做乙個簡單的圓角效果，看起來讓塊狀元素更加圓潤柔和一點，百分之九十的同學可能用到的就是這個層級，但是 border-radius 的功能遠不止於此。

首先要明白的是 border-radius 的使用方法：

.classname

這是最基礎的用法，但是在深入研究以後會發現，borer-radius 會隨著屬性值格式不同而表現不同。接下來將具體說說各種格式對應的用法和樣式。

首先是單位的不同，單位分為 px 和 % 兩種。 px 為單位時是作為固定長度，而 % 為單位時則是所在邊的百分比例。當塊狀元素為正方形時，兩者沒有區別，但是當為長寬不一樣的矩形時，區別就出來了。

明顯能感覺到：當長寬不一致的時候，百分比是按照對應角所在邊的長度進行換算的。

而 border-radius 的屬性值不僅有單位的區別，還有個數的區別。

1個屬性值：border-radius: 30px;

2個屬性值：border-radius: 30px 60px;

3個屬性值：border-radius: 30px 60px 90px;

4個屬性值：border-radius: 30px 60px 90px 120px;

可以看出，隨著屬性值個數的增加，border-radius 對應角度所匹配的數值也不一樣。

其實這個匹配規則和margin、padding等是一樣的，都是從左上順時針依次匹配，當乙個屬性時大家都相同；兩個屬性時分上下為一組、左右為一組分別對應兩個數值；三個屬性時分為上、左右、下三部分，分別對應三個數值；四個屬性時分為上、右、下、左四組分別對應四個數值。

而對於border-radius而言，本來就是針對角的屬性，所以需要你稍微往左45°歪一下頭，這樣來對應上下左右。

有了一到四個屬性值了，有人會問有沒有五六七個屬性值，其實大家可以去試試，就會發現，沒有哈哈哈哈，瀏覽器就會報不合法屬性值

但是八個屬性值的時候，又可以了，只是與普通屬性值會有些差異，當為八個屬性值時，會分為四個一組，前後兩部分，以「/」作為分割。那具體格式就是 border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;

從數值對應關係來看，如果用字母來分類，例如 border-radius: a b c d / e f g h; 對應的 top-left: a e; top-right:b f; bottom-right: c g; bottom-left: d h;

可以發現，就是跟四個屬性值一樣的規則，從左上順時針，『/』前後屬性值一一對應分為四組，依次與四個角對應。並且分為小組的兩個屬性值中，也是按照「先上下後左右」的順序。

看到這裡 border-radius 的用法基本上就介紹的差不多了，而這個屬性會隨著屬性值有不同的表現，核心其實是不同屬性值代表不同長短軸橢圓相交出來的曲線不同而已。

有些同學會問，例子中的塊級元素的背景怎麼是漸變的，是使用背景嗎？其實並不是，而是用的 css3 提供的另乙個功能 background-image: linear-gradient(

45deg, #32c415

0%, #f09

現在就可以動動小手試試吧！

純css3生成示例：