參考文章：
一．前言
最近自己寫了乙個導航欄，馬馬虎虎就是嘖個樣紙：
其中的圓角做了好久，就是嘖個：
既然用到了，我就在這總結一下圓角border-radius的用法，閒話不多說，進入正題。
二．border-radius的幾種常用的寫法
border-radius:20px;
或border-radius:20px 20px 20px 20px;
或者border-radius:20px/20px;
或者border-radius:20px 20px/20px 20px;
或者border-radius:20px 20px 20px/20px 20px 20px;
或border-radius:20px 20px 20px 20px/20px 20px 20px 20px;
可以說，最後一種才是完整的寫法，前面幾種均是它的簡寫。（當然，其中的值我們也可以用百分比來寫）；
那麼，我們以最後一種為例，其中各值分別表示啥子呢?
20px 20px 20px 20px/20px 20px 20px 20px其對應的值所作用的相應物件分別為：
(水平半徑：左上 右上 右下 左下
)/(垂直半徑：左上 右上 右下 左下
)
我們這裡說這是指半徑，那這個半徑是啥子嘞？理解這個，就很好理解border-radius如何建立圓角。
三．border-radius如何實現圓角
首先，廢話不多說，以實物為例：
我們會想，左上角的圓角是如何形成的，這裡就要用到剛剛說的垂直半徑與水平半徑，怎麼說呢，我們用兩張圖來表示：
而我們的圓角就是上圖中的左上圓角，即下圖中黃色的部分
現在知道border-radius的圓角是怎麼來的了吧。類似的，其他的圓角也是一樣的。
但是也有一些特例，比如：
但是，假如我們border-radius設為
border-radius:0 300px 0 0/0 300px 0 0;
我們會發現結果和上面的一樣，這是為哈？
哥們，從上面，我們知道圓角其實就是乙個圓(正圓和橢圓
)的乙個四分之一弧，而我們上面的
div塊高寬加上邊框也才
200px
的畫素，也就是說上面這種情況，咱能承受的最大垂直半徑和水平半徑分別是也就是
200px
，按照鑫神()
的說法，這叫
大值特性
，也就是我能構建的最大的弧也只能是200px的水平垂直半徑的弧，故而，顯示的結果和之前是一樣的。
不過，肯定馬上有哥們出來反駁我：假如我
border-radius設為
border-radius:0 400px 0 0/0 200px 0 0;
結果就是不一樣的，好，我們來試試，結果是這樣的：
還真的是不一樣嘞！！！
好，這裡還有個東西沒有講，再引用鑫神的文章，css3圓角除了大值特性，還有乙個
等比例特性
，就是水平半徑和垂直半徑的比例是恆定不變的。所以，上乙個例子中，我們水平半徑和垂直半徑的比例應該為2：
1，然後根據
大值特性
，首先，我們的水平半徑為200px的畫素，那我們垂直半徑為
100px
，故而是上面的效果。
最後，咱還有乙個東西遺漏了，就是當咱單獨設定某乙個圓角時，比如：border-top-left-radius:40px;(border-top-left-radius中
top在前
left
在後)它的格式需要注意的是，它最多只能填兩個值，填乙個值時表示的是垂直半徑與水平半徑為同乙個值，當填兩個值時，兩值分別表示的是水平半徑與垂直半徑。
四．總結
通過圓角來設計一些布局效果是一項非常麻煩的事，雖然看起來簡單，不過它代替了以前用來實現效果的方式，減少了記憶體的占用。另外，凡事眼見為實，不懂不知道就去測試就是了，別等著別人來告訴你，你會收穫很多，而且別人寫的東西也有可能有錯誤也說不定。
CSS3筆記 漸變
漸變，可以在兩個或多個指定的顏色之間顯示平穩的過渡。相容性 ie10 chrome10 firefox3.6 safari5.1 opear 11.6 沿著一根軸改變顏色，顏色從起點到終點進行順序漸變 從一邊拉向另一邊 語法 字首不同，其他一致 background linear gradient ...
CSS3 筆記3 彈性盒布局flex
使用css3中的乙個box flex屬性就可以隨著瀏覽器視窗的改變而自適應。彈性盒布局是在盒布局的基礎上進行自適應。彈性盒布局相容性 webkit box flex 1 safara瀏覽器 chrome瀏覽器 moz box flex 1 firefox瀏覽器 數字1 是指所佔的比例份數。比如第乙個...
CSS3筆記 3 過渡效果 動畫 變形
語法 transition duration time 語法 transition property none all property 語法 transition delay time 語法 transition timing function linear ease ease in ease o...