SS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同，這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法，其余大家可以查閱相關(guān)資料。W3C 語法已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
我們來說一下線性漸變：
54b72b2e0001500103790158.jpg.png
參數(shù)：
第一個(gè)參數(shù):指定漸變方向，可以用“角度”的關(guān)鍵詞或“英文”來表示：
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>右下角向左上角的線性漸變背景</p>
</body>
</html>
