by zhangxinxu from
.not-a-square下面就是我們可能不怎麼在意的，可能會產生問題的書寫順序：
.not-a-square實際上，按照我們的邏輯思考，後面的書寫也應該不會產生問題啊。比如說，火狐即支援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屬性，
這本身沒什麼，只是……見下面：
.not-a-square當屬性超過乙個引數值的時候，不同的屬性產生的作用是不一樣的。純情的那種寫法(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 漸變貌似也有同樣的遭遇。我想，以後會有人吧這些差異全部羅列出來的。但是，無論怎樣，把「純情」的寫法放在最後壓軸總是更明智的。
最後，祝大家中秋快樂！
CSS屬性書寫順序
建議遵循以下順序 1 布局定位屬性 display position float clear visibility overflow 建議display第乙個寫，畢竟關係到模式 2 自身屬性 盒模型 width height margin padding border background 3 文字...
CSS屬性書寫順序
建議遵循以下順序 1 布局定位屬性 display position float clear visibility overflow 建議display第乙個寫，畢竟關係到模式 2 自身屬性 width height margin padding border background 3 文字屬性 c...
css屬性書寫順序
生活中衡量乙個人有氣質 穿著打扮 舉止言行 等等 程式設計中衡量乙個人的 能力？規範標準 優雅高質量 等等 乙個詞形容 專業 從 中看出是否有經驗 1.布局定位屬性 display position float clear visibility overflow 建議display第乙個寫,畢竟關係...