從css3書寫順序引出來的border-radius參數

本魚表示偶已經不會取標題了。。。

當時寫這篇文章主要是想探討一下優雅降級和漸進加強的區別，按照正常的邏輯思惟，無論是降級仍是加強，應該對於效果是沒什麼區別的，由於後者會覆蓋前者，但今天無心看到張鑫旭的一篇文章，關於CSS3屬性的書寫順序（10年的，原諒個人孤陋寡聞T_T），標準的css3屬性和帶webkit的前綴在某些狀況是不同的效果，好比border-radius和-webkit-border-radius帶兩個參數時，顯示的效果並不同：

.not-a-square {
   border-radius: 30px 10px; /*讓box左上和右下角爲30像素圓弧，左下角和右上是10像素圓弧*/
   -webkit-border-radius: 30px 10px; /*box渲染爲每一個角都是30像素寬10像素高的圓弧*/
}

展現結果（直接借圖啦，固然本魚也實踐過了，確實如此~）：

順便帶出一下border-radius的參數：

據w3c上的官方解釋，是這樣子的：

border-radius: 1-4 length|% / 1-4 length|%;
1-4指的是radius的四個值，length和%指的是值的單位。

寫過border的人都知道border能夠帶四個參數分別設置四個邊框（上左下右的順序），一樣的，border-radius也能夠帶四個參數，而且以順時針的方向解析，上左，上右，下右，下左：

.box{
    border-radius: 5px 10px 20px 50px          
}

展現結果：

兩個參數的時候，是上左和下右，上右和下左，好比.div1{border-radius: 2em 1em}，就不截圖了，直接demo

三個參數的時候，是上左，上右和下左，下右，好比.div1{border-radius: 2em 1em 3em}，demo

 

那麼以斜槓/分開後面的參數是怎麼回事呢？是這樣子的，第一個參數表示圓角的水平半徑，第二個參數表示圓角的垂直半徑，因此你如今就能夠畫一個左右不對稱的圓角啦：

.div1{border-radius: 2em/1em}

 

看到這裏你會不會以若是四個圓角都要分別制定特殊的形狀，是否是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那個四個參數同樣的設定（我就是這麼覺得的），答案是錯！誤！的！由於官方的解釋就是前面放1-4後面放1-4啊！魚不是被吃掉的就是被笨s的~

.div1{
        border-radius:10px 20px 30px 40px/40px 30px 20px 10px
}

按順時針的順序，斜槓/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，可是一般咱們不多寫右邊的參數，那就是默認右邊等於左邊的值。固然你也能夠省略一些值，好比這樣子寫.div1{border-radius: 2em 1em 4em / 0.5em 3em;}，解析順序你就能夠按照上面的本身推算一下啦。

而後再回到張老師的那個-weibkit前綴下的問題{-webkit-border-radius:30px 10px}實際上就等於{border-radius:30px/10px}，效果是同樣的，至於爲何，我也還不知道，張老師說background-image也有此問題，姐明天再瞧瞧，back home~

 

參數：http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/

　　http://www.w3school.com.cn/cssref/pr_border-radius.asp