線性漸變

線性漸變，表示兩種顏色或多種顏色之間的平滑過渡。由漸變線和色標組成，漸變線控制漸變方向，色標控制顏色變化(包含一個顏色值和位置)。

漸變線

漸變線的起點和終點與漸變框一個角垂直線相交，且經過漸變框中心。

1. 角度

漸變線可以使用角度來指定方向，0deg表示沿著元素中心的Y軸從下到上，正直表示順時針旋轉。

2. 關鍵字

漸變線也可以使用關鍵字來指定方向，預設為to bottom。

to top 表示 0deg
to right 表示 90deg
to bottom 表示 180deg
to left 表示 -90deg(或270deg)
to top left 表示 -45deg(或315deg)
to top right 表示 45deg
to bottom left 表示 -135deg(或225deg)
to bottom right 表示 135deg
 

色標

色標由顏色值和位置組成，每個線性漸變至少設定兩個色標。

1. 如果只有兩個色標，可省略位置，將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)
linear-gradient(red,blue);

2. 如果只有兩個色標，且設定位置，則0%_{n%為第一種顏色，n%}m%為第一種顏色到第二種顏色的過渡，m%~100%為第二種顏色。

background-image: linear-gradient(red 20%,blue 80%);
// 等價
background-image: linear-gradient(red 0%,red 20%,blue 80%,blue 100%);
 

3. 如果多個色標指定同一位置，處在中間的色標無效。

background-image: linear-gradient(red 50%,white 50%,black 50%);
// 等價
background-image: linear-gradient(red, 50%,black 50%);

4. 如果多個色標沒有指定位置，則均勻分佈。

// 各佔33.333%
background-image: linear-gradient(red,green,blue);

重複漸變

重複漸變，表示重複線性漸變的效果，使色標在漸變線上無線重複。值得注意的是，只有首尾兩個色標位置不在0%或100%時，重複漸變才生效。

background-image: repeating-linear-gradient(red 20%,blue 50%);
 

徑向漸變

徑向漸變(Radial-gradient)，指從橢圓中心點由內向外進行顏色漸變。由橢圓和色標組成，橢圓控制漸變位置、大小和形狀，色標控制顏色變化(包含一個顏色和位置)。

radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)

橢圓

橢圓控制漸變形狀、大小和位置。

1. 形狀

橢圓形狀(shape)，可選擇圓(Circle)或橢圓(Ellipse)，預設為Ellipse。

2. 大小

可使用關鍵字，百分比或長度單位。如果是圓，則表示半徑；如果是橢圓，第一個值表示水平直徑，第二隻表示垂直直徑；如果是關鍵字，如下所示：

closest-side: 最近邊
closest-corner: 最近角
farthest-side: 最遠邊
farthest-side: 最遠角

3. 位置

橢圓位置有多種表示方式，可通過關鍵字，百分比或長度來表示。

// 關鍵字
left right top bottom
// 百分比：X軸百分比相對框的寬度，Y軸百分比相對於框的高度
50% 60%
// 長度：以左上角為0點進行定位

色標

色標由顏色值和位置組成，每個線性漸變至少設定兩個色標。

1. 如果只有兩個色標，可省略位置，將分別為0%和100%位置。

// 等於linear-gradient(red 0%,blue 100%)
linear-gradient(red,blue);

2. 如果只有兩個色標，且設定位置，則0%_{n%為第一種顏色，n%}m%為第一種顏色到第二種顏色的過渡，m%~100%為第二種顏色。

background-image: radial-gradient(red 20%,blue 80%);
// 等價
background-image: radial-gradient(red 0%,red 20%,blue 80%,blue 100%);

3. 如果多個色標指定同一位置，處在中間的色標無效。

background-image: radial-gradient(red 50%,white 50%,black 50%);
// 等價
background-image: radial-gradient(red, 50%,black 50%);

4. 如果多個色標沒有指定位置，則均勻分佈。

// 各佔33.333%
background-image: radialr-gradient(red,green,blue);

重複漸變

重複漸變，表示重複線性漸變的效果，使色標在漸變線上無線重複。值得注意的是，只有首尾兩個色標位置不在0%或100%時，重複漸變才生效。

background-image: repeating-radial-gradient(red 20%,blue 80%);