一、不同書寫順序示例
首先個人推薦的正確寫法：
//標(biāo)準(zhǔn)屬性放在兼容屬性之后
-webkit-border-radius: 10px 30px;
border-radius:10px 30px;
容易產(chǎn)生問題的錯誤寫法：
//標(biāo)準(zhǔn)屬性放在兼容屬性之前
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:
標(biāo)準(zhǔn)寫法(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書寫順序瀏覽器最終執(zhí)行兼容寫法(-webkit-border-radius: 10px 30px)，Chrome則將div1渲染為每個角都是10像素寬30像素高的圓弧。
三、總結(jié):
標(biāo)準(zhǔn)屬性與兼容屬性在特定的情況下會表現(xiàn)出不一樣的效果。
類似的問題同樣出現(xiàn)在transform、linear-gradient等屬性上，工作中應(yīng)將標(biāo)準(zhǔn)屬性放在兼容屬性之后以避免此類問題出現(xiàn)。具體原因待查，如果有高人知道還望指點。
(轉(zhuǎn)載請注明出處：http://www.itdecent.cn/p/f61d4770aab2 )
