定义CSS3属性的书写顺序
敲键小勇士
2024-04-23 23:38
不同书写顺序示例，首先是比较聪明和值得推荐的写法： not-a-square {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}，其中也有可能会产生问题的书写顺序。
（一）不同书写顺序示例
值得推荐的写法为：
以下是可能会产生问题的书写顺序：
事实上，按照逻辑思考，后面的书写应该也不会有问题啊。例如：火狐支持border-radius:10px，也支持-moz-border-radius:10px;属性，overwrite前面的也没有问题啊。但是，并没有那么简单。
（1）很久很久以前，浏览器不宠幸前缀css3也不宠幸纯情CSS3，即border-radius；
（2）不久前，浏览器只宠幸前缀CSS3，不宠幸纯情的CSS3；
（3）现在，浏览器不但宠幸前缀CSS3属性，也宠幸纯情CSS3属性；
（4）以后，浏览器只宠幸纯情CSS3属性。
如下图：
（二）实例说明
目前，webkit核心的浏览器不单只支持“border-radius”属性，也支持“-webkit-border-radius”属性，如下图：
在属性超过参数值时，不同的属性的作用不同。
“30px10px”写法可以使box左上以及右下角为30像素圆弧，左下角以及右上是10像素圆弧。而前缀写法“-webkit-border-radius”，box就渲染称每个角都是30像素宽10像素高的圆弧。
Chrome浏览器或者是Safari4还是扁平，就能显示。
总结：其实Borderradius不是唯一的实例，在CSS3中的“background-image”也相似。但是，无论如何，把“纯情”的写法放在最后压轴更明智的。要是想要了解更多关于web认证的内容，可以关注我们的网站：编程学习网教育。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
