定义CSS3属性的书写顺序

作者:课课家教育更新于： 2019-03-15 16:37:42

      不同书写顺序示例，首先是比较聪明和值得推荐的写法： 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认证的内容，可以关注我们的网站：课课家教育。