Chris Coyier曾发表过一篇博文《Ordering CSS3 Properties》，为我们讲述了在书写CSS时要注意属性的定义顺序，不同的顺序得到的展示结果可能是不同的。鑫空间-鑫生活个人网站的版主张鑫旭对此文进行了翻译，现把此文转载于此。全文如下：
一、不同书写顺序示例
首先是比较聪明和值得推荐的写法：
|
下面就是我们可能不怎么在意的，可能会产生问题的书写顺序：
|
实际上，按照我们的逻辑思考，后面的书写也应该不会产生问题啊。比如说，火狐即支持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属性，这本身没什么，只是……见下面：
|
当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。
纯情的那种写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。而那种杂碎的前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧。
