css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序

一、不同书写顺序示例

首先个人推荐的正确写法：

//标准属性放在兼容属性之后

-webkit-border-radius: 10px 30px;

border-radius:10px 30px;

容易产生问题的错误写法：

//标准属性放在兼容属性之前

border-radius:10px 30px;

-webkit-border-radius: 10px 30px;

二、实例说明

1.实例

实例1.1(正确写法)：

Document

.div1

{

width: 200px;

height: 200px;

background: #00f;

-webkit-border-radius: 10px 30px;

border-radius:10px 30px;

}

实例1.1 Chrome/FF/IE浏览器效果：

实例1.1效果

实例1.1:

标准写法(border-radius: 10px 30px)，是让div1左上和右下角为10像素圆弧，左下角和右上是30像素圆弧。无异常。

实例1.2(错误写法)：

Document

.div1

{

width: 200px;

height: 200px;

position: absolute;

left: 500px;

top: 200px;

background: #00f;

border-radius:10px 30px;

-webkit-border-radius: 10px 30px;

}

实例1.2 Chrome版本 54.0.2840.71 m效果：

实例1.2效果1

实例1.2 Firefox/IE效果:

实例1.2效果2

实例1.2:

Chrome效果异常。

webkit核心的浏览器不仅支持border-radius属性，也支持-webkit-border-radius属性。由于CSS书写顺序浏览器最终执行兼容写法(-webkit-border-radius: 10px 30px)，Chrome则将div1渲染为每个角都是10像素宽30像素高的圆弧。

三、总结:

标准属性与兼容属性在特定的情况下会表现出不一样的效果。

类似的问题同样出现在transform、linear-gradient等属性上，工作中应将标准属性放在兼容属性之后以避免此类问题出现。具体原因待查，如果有高人知道还望指点。

css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序相关推荐

CSS中选择器的优先级　（　※关于相同属性的覆盖问题　）
<style>#a{color:red}.b{color:blue;fontsize:20px}</style><div id="a" class=& ...
浏览器内核 css浏览器的兼容性写法
Trident: ie浏览器: Gecko: firefox浏览器: webkit: safari,google,chrome,遨游3,猎豹,百度浏览器: presto: opera浏览器 css浏览 ...
css中字体前方块,CSS3 透明纹理的方块变换+字母拼图
CSS 语言: CSSSCSS 确定 html, body { height: 100%; } body { display: flex; justify-content: center; align ...
CSS中的颜色值与颜色属性
文章目录颜色模型 CSS颜色值的类型颜色名称 rgb[a] rgba的新写法 CSS元素的透明度 hex十六进制值 hsl[a] 颜色值关键字 transparent currentColor C ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
css中相对定位和绝对定位
css中相对定位和绝对定位定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...

css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序

css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序相关推荐

最新文章

热门文章