CSS 實現背景色漸變和文字顏色漸變

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]-->