CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
看看都有哪些前缀：

• -webkit
• -moz
• -ms
• -o

举例来说，一个CSS3旋转的代码是：

• -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
• -moz-transform:rotate(-3deg); /*为Firefox*/
• -ms-transform:rotate(-3deg); /*为IE*/
• -o-transform:rotate(-3deg); /*为Opera*/

CSS3前缀+标准代码的顺序
既然CSS3代码中（暂时）需要写上这么多前缀，那么他们的顺序是如何的呢？
答案在下面↓
是先写私有的CSS3属性，再写标准的CSS3属性。

• -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
• -moz-transform:rotate(-3deg); /*为Firefox*/
• -ms-transform:rotate(-3deg); /*为IE*/
• -o-transform:rotate(-3deg); /*为Opera*/
• transform:rotate(-3deg); /*为nothing*/

去掉CSS3前缀
什么时候我们可以去掉一个属性的CSS3前缀呢？
答案还在下面↓
当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

• 以border-radius为例：
• -moz-border-radius: 12px; /* FF1-3.6 */
• -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
• border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius属性了，我们就没有必要写以上两条了，代码变成：

• border-radius: 12px;

【注】CSS Lint有一条：使用CSS渐变等高级特性，需指定所有浏览器的前缀（CSS gradients require all browser prefixes），我认为不要盲目迷信，你觉得呢？

原文连接 作者邮箱：fishguo321[@]gmail.com