CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同，這里我們只針對(duì)線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法，其余大家可以查閱相關(guān)資料。W3C 語法已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。

這一小節(jié)我們來說一下線性漸變：

參數(shù)：

第一個(gè)參數(shù):指定漸變方向，可以用“角度”的關(guān)鍵詞或“英文”來表示：

（單擊圖片可放大）

第一個(gè)參數(shù)省略時(shí)，默認(rèn)為“180deg”，等同于“to bottom”。

第二個(gè)和第三個(gè)參數(shù)，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個(gè)顏色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果圖：