前言:
最近一直在写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/