淺談CSS3新特性——線性漸變linear-gradient

漸變：兩種或多種顔色之間的平滑過渡。

線性漸變：兩種或多種多種顔色沿漸變線過渡。

漸變的組成：漸變線和色标。漸變線用來控制漸變的方向；色标包含顔色值和位置，用來控制漸變的顔色變化。

文法：

linear-gradient([[<angle> | to <side-or-corner>] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

1、漸變線

<angle>——指定漸變的方向（或角度）。

to left：設定漸變為從右到左。相當于：270deg。

to right：設定漸變從左到右。相當于：90deg。

to top：設定漸變從下到上。相當于：0deg。

to bottom：設定漸變從上到下。相當于：180deg（預設值）。

to left top：設定漸變為從右上到左下。相當于：-45deg或315deg。

to right top：設定漸變為從左上到右下。相當于：45deg。

to bottom left：設定漸變為從左上到右下。相當于：-135deg或225deg。

to bottom right：設定漸變為從左上到右下。相當于：135deg。

說明：

标準浏覽器：0deg表示沿着元素的中心線由下向上的方向(類似于y軸)，且正角度表示順時針旋轉；

-webkit-非标準浏覽器，0deg表示沿着元素中心線從左向右的方向(類似于x軸)，且正角度表示逆時針旋轉。

-webkit-非标準浏覽器與标準浏覽器間的線性漸變的角度關系為：-webkit-浏覽器 = 90deg - 标準浏覽器，如-webkit-linear-gradient(90deg, red, blue) = linear-gradient(0deg, red, blue)。

2、色标

<color-stop>——指定漸變的起止顔色。

<color>：指定顔色。

<length>：用長度值指定起止色位置，不允許負值。

<percentage>：用百分比指定起止色位置。

說明：

色标沒有預設值，且必須設定至少兩個色标。

色标由顔色和位置組成，位置可使用百分比或數值，可設定負值。

位置可以省略，預設第一個顔色的位置設定為0%，最後一個顔色的位置設定為100%，其他顔色均勻分布。

必須是顔色在前，位置在後。

若漸變隻有兩種顔色，第一個顔色的位置設定為x%，第二個顔色的位置設定為y%，則0%-x%的範圍設定為第一個顔色，x%-y%的範圍設定為第一個顔色到第二個顔色的漸變，y%-100%的範圍設定為第二個顔色。

若多色占據同一個位置，則中間的顔色是無用的。如x、y、z三色均占據x%這一位置，則0%-x%為前一種顔色與x顔色的漸變；x%-x%為x顔色與z顔色的顔色突變；x%-100%為z顔色與後一種顔色的漸變。