SS3 Gradient 分為線(xiàn)性漸變(linear)和徑向漸變(radial)嵌牺。由于不同的渲染引擎實(shí)現(xiàn)漸變的語(yǔ)法不同，這里我們只針對(duì)線(xiàn)性漸變的 W3C 標(biāo)準(zhǔn)語(yǔ)法來(lái)分析其用法哥捕，其余大家可以查閱相關(guān)資料。W3C 語(yǔ)法已經(jīng)得到了 IE10+墩莫、Firefox19.0+延塑、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
我們來(lái)說(shuō)一下線(xiàn)性漸變：
54b72b2e0001500103790158.jpg.png
參數(shù)：
第一個(gè)參數(shù):指定漸變方向幻碱，可以用“角度”的關(guān)鍵詞或“英文”來(lái)表示：
542a25da00017e9406980223.jpg.png
第一個(gè)參數(shù)省略時(shí)绎狭，默認(rèn)為“180deg”，等同于“to bottom”褥傍。
第二個(gè)和第三個(gè)參數(shù)儡嘶，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個(gè)顏色值恍风。
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left, red, orange,yellow,green,blue,indigo,violet);;
}
</style>
</head>
<body>
<p>右下角向左上角的線(xiàn)性漸變背景</p>
</body>
</html>
