一、不同書寫順序示例

首先個(gè)人推薦的正確寫法：

//標(biāo)準(zhǔn)屬性放在兼容屬性之后

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

border-radius:10px 30px;

容易產(chǎn)生問題的錯(cuò)誤寫法：

//標(biāo)準(zhǔn)屬性放在兼容屬性之前

border-radius:10px 30px;

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

二、實(shí)例說明

1.實(shí)例

實(shí)例1.1(正確寫法)：

Document

.div1

{

width: 200px;

height: 200px;

background: #00f;

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

border-radius:10px 30px;

}

實(shí)例1.1 Chrome/FF/IE瀏覽器效果：

實(shí)例1.1效果

實(shí)例1.1:

標(biāo)準(zhǔn)寫法(border-radius: 10px 30px)，是讓div1左上和右下角為10像素圓弧，左下角和右上是30像素圓弧。無異常。

實(shí)例1.2(錯(cuò)誤寫法)：

Document

.div1

{

width: 200px;

height: 200px;

position: absolute;

left: 500px;

top: 200px;

background: #00f;

border-radius:10px 30px;

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

}

實(shí)例1.2 Chrome版本 54.0.2840.71 m效果：

實(shí)例1.2效果1

實(shí)例1.2 Firefox/IE效果:

實(shí)例1.2效果2

實(shí)例1.2:

Chrome效果異常。

webkit核心的瀏覽器不僅支持border-radius屬性，也支持-webkit-border-radius屬性。由于CSS書寫順序?yàn)g覽器最終執(zhí)行兼容寫法(-webkit-border-radius: 10px 30px)，Chrome則將div1渲染為每個(gè)角都是10像素寬30像素高的圓弧。

三、總結(jié):

標(biāo)準(zhǔn)屬性與兼容屬性在特定的情況下會(huì)表現(xiàn)出不一樣的效果。

類似的問題同樣出現(xiàn)在transform、linear-gradient等屬性上，工作中應(yīng)將標(biāo)準(zhǔn)屬性放在兼容屬性之后以避免此類問題出現(xiàn)。具體原因待查，如果有高人知道還望指點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。