一、不同书写顺序示例
首先个人推荐的正确写法：
//标准属性放在兼容属性之后
-webkit-border-radius: 10px 30px;
border-radius:10px 30px;
容易产生问题的错误写法：
//标准属性放在兼容属性之前
border-radius:10px 30px;
-webkit-border-radius: 10px 30px;
二、实例说明
1.实例
实例1.1(正确写法)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1
{
width: 200px;
height: 200px;
background: #00f;
-webkit-border-radius: 10px 30px;
border-radius:10px 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
实例1.1 Chrome/FF/IE浏览器效果：
实例1.1效果
实例1.1:
标准写法(border-radius: 10px 30px)，是让div1左上和右下角为10像素圆弧，左下角和右上是30像素圆弧。无异常。
实例1.2(错误写法)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1
{
width: 200px;
height: 200px;
position: absolute;
left: 500px;
top: 200px;
background: #00f;
border-radius:10px 30px;
-webkit-border-radius: 10px 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
实例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等属性上，工作中应将标准属性放在兼容属性之后以避免此类问题出现。具体原因待查，如果有高人知道还望指点。
(转载请注明出处：http://www.jianshu.com/p/f61d4770aab2 )
网友评论