CSS 實現背景色漸層和文字色彩坡形

標籤：半徑   png   tin   允許   position   opera   fill   bsp   相容性   

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" >    <![endif]-->

 

CSS 實現背景色漸層和文字色彩坡形