css奇技淫巧 border radius

官方介紹：

瀏覽器支援：ie9+, firefox 4+, chrome, safari 5+,和opera支援border-radius屬性。

border-radius 屬性是乙個最多可指定四個 border -*- radius 屬性的復合屬性

css語法：

border-radius: 1-4 length|% / 1-4 length|%;

注意:每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

js語法：

object.style.borderradius="
5px"

例子：

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

斜槓/分開後面的引數是怎麼回事呢？是這樣子的，第乙個引數表示圓角的水平半徑，第二個引數表示圓角的垂直半徑，所以你現在就可以畫乙個左右不對稱的圓角啦：

看到這裡你會不會以如果四個圓角都要分別制定特殊的形狀，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那個四個引數一樣的設定（我就是這麼以為的），答案是錯！誤！的！因為官方的解釋就是前面放1-4後面放1-4啊！

按順時針的順序，斜槓/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，但是通常我們很少寫右邊的引數，那就是預設右邊等於左邊的值。當然你也可以省略一些值，比如這樣子寫.div1，解析順序你就可以按照上面的自己推算一下啦。

然後再回到張老師的那個-weibkit字首下的問題實際上就等於

附圖：