CSS linear-gradient() 的文法詳解

CSS linear-gradient() 函數建立一個表示顏色線性漸層的 <image> 。該函數的結果是CSS <gradient> 資料類型的對象。像任何其他漸層，CSS線性漸層不是一個CSS <color> ，而是一個沒有內在尺寸的映像; 也就是說，它既不具有 固有的或首選的尺寸，也不具有比率。它的具體尺寸將與其適用的元素的尺寸匹配。

線性梯度由一個軸 (梯度線) 定義，其上的每個點具有不同的顏色。垂直線到漸層線有一種單一顏色，在漸層線上的一個點。

漸層線由包含漸層圖形的容器的中心點和一個角度來定義的。漸層線上的顏色值是由不同的點來定義，包括起始點，終點，以及兩者之間的可選的中間點（中間點可以有多個）。

起始點是漸層線上代表起始顏色值的點。起始點由漸層線和過容器頂點的垂直線之間的交叉點來定義。（垂直線跟漸層線在同一象限內）

同樣的，終點是漸層線上代表最終顏色值的點。終點也是由漸層線和從最近的頂點發出的垂直線之間的交叉點定義的，然而從起始點的對稱點來定義終點是更容易理解的一種方式，因為終點是起點關於容器的中心點的反射點。

關於起點和終點的稍微有些複雜的定義導致了一個有趣的性質，有時候被叫做不可思議的頂點效應：起點附近的點具有跟起點相同的顏色值，終點附近的點具有跟終點相同的顏色值。

不僅僅只有起點和終點的顏色值可以指定。提供額外的顏色中間點，Web開發人員可以創造在起始顏色值和終點顏色值之間的自訂更強的過渡效果，另外還可以提供多種顏色值的漸層線。

線性漸層文法不允許重複漸層，但是利用顏色中間值可以達到相同的效果。利用CSS屬性可以實現真實的重複漸層效果。

當顏色中間點的位置被隱式定義，它被放置在位於它之前的點和位於它之後的點之間的中間位置處。利用<length>或者<percentage>資料類型可以顯示定義一個位置。

漸層被定義成CSS中的<image>資料類型，因此在CSS中，它僅可以用在需要映像資料類型的地方。由於這個原因，linear-gradient在background-color和其他需要以<color>為值的屬性中使用無效。

文法

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )                                  \---------------------------------/ \----------------------------/                                    Definition of the gradient line         List of color stops                        where <side-or-corner> = [left | right] || [top | bottom]                        and <color-stop>     = <color> [ <percentage> | <length> ]?

linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and                                                   finishing red */linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%                                                   and finishing red */

值

<side-or-corner>

描述漸層線的起始點位置。它包含兩個關鍵詞：第一個指出垂直位置left or right，第二個指出水平位置top or bottom。關鍵詞的先後順序無影響，且都是可選的。
to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。其餘值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。漸層線的結束點與其起點中心對稱。

<angle>

用角度值指定漸層的方向（或角度）。 See <angle>.

<color-stop>

由一個<color>值組成，並且跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸層軸的<length>）。

CSS漸層的顏色渲染採取了與SVG相同的規則。

文法曆史

linear-gradient的文法由2008年實施的first Apple proposal發展而來。

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

在最初文法中，使用同樣的文法實現線性漸層和放射狀漸層。但這兩種漸層所需要的參數有所不同，導致了需要增加第一個參數來區分兩種漸層。如果再增加漸層類型，這樣的處理方式會變得更加複雜。比如錐形漸層，需要用到函數和不規範的CSS值。W3C並未收到相關草案。

一個替代文法在2009年由Mozilla提出並實現。這個文法需要兩個CSS函數，一個用來做線性漸層，另一個用於放射狀漸層。然而，這個文法並沒有被發布產品實現。有人提出了第三種文法，它將線性漸層的文法簡化為：

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

新的文法不需要to()、from()和color-stop()函數，所以這些函數被丟棄。而top/bottom與left/right的順序也被標記為不重要，所以Mozilla移除了必需首先定義top/bottom的限制。

新的文法仍然有一個缺點：它只允許水平和垂直漸層。在多次變更解決了方向限制的問題之後，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

原生支援<angle>允許任何方向的漸層

定義magic corner演算法，允許使用簡便的方式定義端點的顏色，從而簡化了開發人員的工作

在預乘色彩空間裡定義過渡色，從而可以防止在使用不同透明度顏色的情況下出現違和的灰色。在未捨棄原生文法的情況下，帶首碼的版本被Webkit和Trident（IE）實現。

linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

<angle>屬性的添加導致了一些混亂，它應當指向終點方向，但是這些關鍵字卻通常指起始方向。在related W3C CSSWG thread可以查看一些討論。在一項新的文法中，這個問題被修正。它仍然使用方向關鍵字，但是在關鍵字之前增加關鍵字 to 。這項文法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

以上應當是最終文法。

【相關推薦】

1. CSS3免費視頻教程

2. CSS3中linear-gradient的執行個體詳解

3. 詳解CSS3中lineaer-gradient使用方法

4. 深入詳解CSS3中斜向線性漸層lineaer-gradient

5. 關於CSS3中linear-gradient參數的詳解