線性漸變 -webkit-linear-gradient

.header-box {background-image: -webkit-linear-gradient(#000, #121212);background-image: linear-gradient(#000, #121212); }

• 參數(shù)：-webkit-gradient是webkit引擎對(duì)漸變的實(shí)現(xiàn)參數(shù)，一共有五個(gè)。第一個(gè)參數(shù)表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。第二個(gè)參數(shù)和第三個(gè)參數(shù)，都是一對(duì)值，分別表示漸變起點(diǎn)和終點(diǎn)。這對(duì)值可以用坐標(biāo)形式表示，也可以用關(guān)鍵值表示，比如 left top（左上角）和left bottom（左下角）。第四個(gè)和第五個(gè)參數(shù)，分別是兩個(gè)color-stop函數(shù)。color-stop函數(shù)接受兩個(gè)參數(shù)，第一個(gè)表示漸變的位置，0為起點(diǎn)，0.5為中點(diǎn)，1為結(jié)束點(diǎn)；第二個(gè)表示該點(diǎn)的顏色。

• **[css3漸變之linear-gradient與-webkit-linear-gradient寫法異同]**區(qū)別：

background: linear-gradient(direction, color-stop1, color-stop2, …);

通常只需要linear-gradient，兼容性較好。但iphone5的ios6系統(tǒng)下，linear-gradient不識(shí)別，需要加上-webkit-linear-gradient。

linear-gradient和-webkit-linear-gradient的用法是有很大區(qū)別的，千萬(wàn)別以為只是多了一個(gè)-webkit。
主要是第一個(gè)參數(shù)direction。前者需要使用“to bottom”，而后者是“bottom”，不能加“to”：
.im-item .im-mask {
background:linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
background:-webkit-linear-gradient(bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
}

使用角度時(shí)也不一樣，前者0deg表示從下到上，而后者0deg表示從左到右。如：
background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));

如果第一個(gè)參數(shù)省略，那么兩者都表示從上到下，這點(diǎn)倒是相同：
background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));

總結(jié)

以上是生活随笔為你收集整理的线性渐变 `-webkit-linear-gradient`的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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