線性漸變 -webkit-linear-gradient

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

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

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

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

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

linear-gradient和-webkit-linear-gradient的用法是有很大區別的，千萬別以為只是多了一個-webkit。
主要是第一個參數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));
}

使用角度時也不一樣，前者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));

如果第一個參數省略，那么兩者都表示從上到下，這點倒是相同：
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));

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。