1. 背景色漸變
A . linear-gradient：用線性漸變創建圖像。
語法：<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：
- <angle>：用角度值指定漸變的方向（或角度）。
- to left：
- 設置漸變為從右到左。相當於: 270deg
- to right：
- 設置漸變從左到右。相當於: 90deg
- to top：
- 設置漸變從下到上。相當於: 0deg
- to bottom：
- 設置漸變從上到下。相當於: 180deg。 這是默認值，等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色：
- <color>：
- 指定顏色。
- <length>：
- 用長度值指定起止色位置。不允許負值
- <percentage>：
- 用百分比指定起止色位置。
兼容：除了被掃進歷史垃圾堆的IE8,9，以及Opera Mini 不兼容，其他瀏覽器，包括移動端的瀏覽器，都能支持這個屬性。
如果漸變方向是對角線的話，可以用 to top right 這樣的多關鍵字方式來實現。如：
background: linear-gradient(to top right, #f6f5f0, #fefefd);
如果有多個顏色漸變，顏色的參數可以有多個（如圖1）:
background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
可以指定顏色漸變的位置（如圖2）：
background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);
圖1 圖 2
B. radial-gradient：用徑向漸變創建圖像。
語法：<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
<position> 確定圓心的位置。如果提供2個參數，第一個表示橫坐標，第二個表示縱坐標；如果只提供一個，第二值默認為50%，即center
- <percentage>①：
- 用百分比指定徑向漸變圓心的橫坐標值。可以為負值。
- <length>①：用長度值指定徑向漸變圓心的橫坐標值。可以為負值。
- left：
- 設置左邊為徑向漸變圓心的橫坐標值。
- center①：
- 設置中間為徑向漸變圓心的橫坐標值。
- right：
- 設置右邊為徑向漸變圓心的橫坐標值。
- <percentage>②：
- 用百分比指定徑向漸變圓心的縱坐標值。可以為負值。
- <length>②：
- 用長度值指定徑向漸變圓心的縱坐標值。可以為負值。
- top：
- 設置頂部為徑向漸變圓心的縱坐標值。
- center②：
- 設置中間為徑向漸變圓心的縱坐標值。
- bottom：
- 設置底部為徑向漸變圓心的縱坐標值。
<shape> 確定圓的類型
- circle：
- 指定圓形的徑向漸變
- ellipse：
- 指定橢圓形的徑向漸變。
<extent-keyword> circle | ellipse 都接受該值作為 size
- closest-side：
- 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
- closest-corner：
- 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
- farthest-side：
- 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
- farthest-corner：
- 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
<circle-size> circle 接受該值作為 size
- <length>：
- 用長度值指定正圓徑向漸變的半徑長度。不允許負值。
<ellipse-size> ellipse 接受該值作為 size
- <length>：
- 用長度值指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
- <percentage>：
- 用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
<color-stop> 用於指定漸變的起止顏色：
- <color>：
- 指定顏色。
- <length>：
- 用長度值指定起止色位置。不允許負值
- <percentage>：
- 用百分比指定起止色位置。不允許負值
- 用例子來說明（如圖3）：
-
background: radial-gradient(circle, #CDDC39, #8BC34A);第一個參數有兩個值：circle正圓，ellipse橢圓。 默認從圓心向四周漸變。也可以用兩個長度數字來表示圓形，比如50px 50px。有這樣幾種寫法：
circle at center （或者left right）
circle at 50% （這個百分比數字可以改成任意想要的位置）
circle farthest-corner （或者其他3個值。）
圖3
2. 文本顏色漸變
<gradient> ：可以應用在所有接受圖像的屬性上，允許使用簡單的語法實現顏色漸變，以便UA在渲染頁面自動生成圖像。
語法：<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()
注意：必需在一個有尺寸的盒子里生成。如果盒子沒有尺寸，漸變效果則無法呈現。
可以作用在能接受圖像的任意屬性上：
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
文字顏色漸變比較麻煩，並且兼容性差強人意：
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前綴 -webkit- 才支持這個text值 */
-webkit-text-fill-color: transparent; /*text-fill-color會覆蓋color所定義的字體顏色： */
以上三個屬性少一個都不能完成文字漸變。效果圖：
兼容性：
text-fill-color，IE果然又不兼容。移動端UC瀏覽器也不兼容。
-webkit-background-clip: text; 非正式屬性，目前（2017-07-07）僅僅FF、Chrome、Safari支持，並且必須帶前綴。
所以，如果您的目標用戶很有可能會用IE瀏覽器，那么，就需要再寫一個IE下能正常瀏覽的代碼：
<!--[if IE]> <h2>IE才能看見我</h2> <img src="images/text-gradient.png" alt=""> <![endif]-->