下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

定义CSS3属性的书写顺序

作者:课课家教育     来源: http://www.kokojia.com点击数:878发布时间: 2019-03-15 16:37:46

标签: css教程css基础

Web开发

      不同书写顺序示例,首先是比较聪明和值得推荐的写法: not-a-square {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;},其中也有可能会产生问题的书写顺序。

  (一)不同书写顺序示例

  值得推荐的写法为:

定义CSS3属性的书写顺序_css教程_css基础_课课家

  以下是可能会产生问题的书写顺序:

会产生问题的书写顺序

  事实上,按照逻辑思考,后面的书写应该也不会有问题啊。例如:火狐支持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认证的内容,可以关注我们的网站:课课家教育。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程