浅谈css3的书写顺序

本文通过实例演示了CSS3标准属性与浏览器私有属性书写顺序的重要性,并总结出正确的书写顺序应为私有属性在前,标准属性在后。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

 

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值