需警惕CSS3屬性的書寫順序
一、不同書寫順序示例
首先是比較聰明和值得推薦的寫法：
2. -webkit-border-radius: 10px;
3. -moz-border-radius: 10px;
4. border-radius: 10px;
5. }
下面就是我們可能不怎么在意的，可能會產生問題的書寫順序：
2. border-radius: 10px;
3. -webkit-border-radius: 10px;
4. -moz-border-radius: 10px;
5. }
實際上，按照我們的邏輯思考，后面的書寫也應該不會產生問題啊。比如說，火狐即支持border-radius: 10px;又支持-moz-border-radius: 10px;屬性，后面的overwrite前面的也沒有問題啊。但是，事實上，事情不是我們想的那么簡單的。
1. 很久很久以前：瀏覽器即不寵幸前綴CSS3也不寵幸純情CSS3(border-radius)；
2. 不久之前：瀏覽器只寵幸前綴CSS3，不寵幸純情的CSS3；
3. 現在：瀏覽器不僅寵幸前綴CSS3屬性，還寵幸純情CSS3屬性；
4. 等到以后：前綴CSS3就回鄉下帶孩子了，瀏覽器只寵幸純情CSS3屬性。
下圖就是這種趨勢的生動寫照。
二、實例說明
理想總是美好的，現實總是慘淡的。當下，webkit核心的瀏覽器不僅支持border-radius屬性，也支持-webkit-border-radius屬性，這本身沒什么，只是……見下面：
2. // 這兩個家伙干的不是同一個活
3. border-radius: 30px 10px;
4. -webkit-border-radius: 30px 10px;
5. }
當屬性超過一個參數值的時候，不同的屬性產生的作用是不一樣的。
純情的那種寫法(border-radius: 30px 10px)，是讓box左上和右下角為30像素圓弧，左下角和右上是10像素圓弧。而那種雜碎的前綴寫法(-webkit-border-radius)，則box渲染為每個角都是30像素寬10像素高的圓弧。
如下圖所示：
如果您現在使用的是最新的Chrome瀏覽器（我的是Chrome6.0.472.62），或者是（Safari4依舊扁平）Safari5，您可以狠狠地點擊這里：CSS3不同書寫屬性影響demo，您就能看上上面截圖所示的效果了。
三、結語
其實Border radius不是唯一的實例，CSS3中的background-image 漸變貌似也有同樣的遭遇。我想，以后會有人吧這些差異全部羅列出來的。但是，無論怎樣，把“純情”的寫法放在最后壓軸總是更明智的。
留言列表
