border-radius: none ｜ length / length
其中每乙個值可以為 數值或百分比的形式。
length/length 第乙個lenght表示水平方向的半徑，而第二個表示豎直方向的半徑。
如果是乙個值，那麼 top-left、top-right、bottom-right、bottom-left 四個值相等。
如果是兩個值，那麼 top-left和bottom-right相等，為第乙個值，top-right和bottom-left值相等，為第二個值。
如果是三個值，那麼第乙個值是設定top-left，而第二個值是 top-right 和 bottom-left 並且他們會相等,第三個值是設定 bottom-right。
如果是四個值，那麼第乙個值是設定 top-left， 而第二個值是 top-right 第三個值 bottom-right 第四個值是設定 bottom-left
除了上述的簡寫外，還可以和border一樣，分別寫四個角，如下：
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
分別是水平方向和豎直方向半徑，第二值省略的情況下，水平方向和豎直方向的半徑相等。
border-radius 只有在以下版本的瀏覽器：firefox4.0+、safari5.0+、google chrome 10.0+、opera 10.5+、ie9+ 支援 border-radius 標準語法格式，對於老版的瀏覽器，border-radius 需要根據不同的瀏覽器核心新增不同的字首，比說 mozilla 核心需要加上「-moz」，而 webkit 核心需要加上「-webkit」等，但是ie和opera沒有私有格式，因此為了最大程度的相容瀏覽器，我們需要設定如下：
-webkit-border-radius: 10px 20px 30px;
-moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
請將標準形式寫在瀏覽器私有形式之後。
舉幾個例子看一下效果：
title>
border radius屬性失效問題的解決辦法
今天除錯專案的時候突然發現，設定的border radius竟然失效了，開啟f12，眼看著瀏覽器把這個屬性也給劃掉了，不是一般的鬱悶，按照道理來說，不應該會出現這樣神奇的bug。photo解決辦法 萬能的 important 在border radius屬性裡面新增 important css中的 ...
border radius 兩個值原理
假如有兩個值，如 border top left radius 50px 100px，表示水平半徑為50px，垂直半徑為100px的橢圓，如圖 1個值 border radius 5px 5px，那麼其水平半徑和垂直半徑相等，故為圓，如圖 2個值 border radius 5px 5px 10px...
borderRadius的計算縮寫理解
border radius是我們實現圓角的方法之一 ie8以下不支援，相容的話建議上層定位一張圓角 不過圓角這個屬性也有自己的縮寫計算方式，很多人看到 border radius 20px 20px 20px 30px 這樣的 就不知道圓角效果是什麼樣的，今天說一下我自己的理解 自動補全法。bord...