本魚表示偶已經不會取標題了。。。
當時寫這篇文章主要是想探討一下優雅降級和漸進增強的區別，按照正常的邏輯思維，不管是降級還是增強，應該對於效果是沒什么區別的，因為后者會覆蓋前者，但今天無意看到張鑫旭的一篇文章，關於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.w3school.com.cn/cssref/pr_border-radius.asp