如何定义CSS3属性的书写顺序

一、不同书写顺序示例

首先是 比较聪慧和值得推举的写法：

.not-a-square { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

下面便是我们可能不怎么在意的，可能会产生问题的书写顺序：

.not-a-square {<BR>border-radius: 10px;<BR>-webkit-border-radius: 10px;<BR>-moz-border-radius: 10px;<BR>}

实际上，依照我们的逻辑思量，后面的书写也应该不会产生问题啊 。 比方说，火狐即 支撑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 {<BR>// 这两个家伙干的不是同一个活 <BR>border-radius: 30px 10px;<BR>-webkit-border-radius: 30px 10px;<BR>}<BR>

当属性超过一个参数值的时候，不同的属性产生的作用是不一样的 。

纯情的那种写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧 。而那种杂碎的前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧 。

假如您现在 使用的是最新的Chrome阅读器(我的是Chrome6.0.472.62)，或者是(Safari4依然扁平)Safari5，您就能看到 动机了 。

三、结语

其实Border radius不是唯一的实例，CSS3中的background-image 渐变貌似也有同样的 遭逢 。我想，以后会有人吧这些差别所有排列出来的 。然而，无论 怎么，把“纯情”的写法放在最终压轴总是更 理智的 。