浅谈css3的书写顺序

前言：

 

      最近一直在写css规范的文档，关于css3的一些规则，大家多有一些抱怨，很多的私有属性如-webkit|-moz等，但是部分写法中对应规则的顺序到底是有没有关系，前后关系会不会带来一些问题？

 

正文：

 

我们先直接来看一个demo

 

/*标准在前，私有在后*/
.test-no{
  border-radius:30px 10px;
  -webkit-border-radius:30px 10px;
}
/*私有在后，标准在后*/
.test-yes{
  -webkit-border-radius:30px 10px;
  border-radius:30px 10px;
}

   

 

<div id="t1" class="test-no" style="height:50px;width:100px;border:1px solid blue;"></div>
<div id="t2" class="test-yes" style="height:50px;width:100px;border:1px solid blue;"></div>

 

结果在chrome下的截图：

 

         
所以对于css3的书写顺序的规则：

 

        浏览器私有属性在前，标准的属性在后 

 

 

扩展阅读：

 

http://css-tricks.com/ordering-css3-properties/

 

http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/