層疊樣式表/漸變

<gradient> = [
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()> |
  <conic-gradient()>  | <repeating-conic-gradient()> ]

漸變被繪製到具有具體物件尺寸的框中，稱為漸變框。然而，漸變本身沒有自然的尺寸。

linear-gradient

linear-gradient 語法

<linear-gradient-syntax> =
  [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
  <color-stop-list>
<side-or-corner> = [left | right] || [top | bottom]

角度和到側面或角落的關係

• 0deg 等效於 to top。
• 90deg 等效於 to right。
• 180deg 等效於 to bottom。
• 270deg 等效於 to left。
• 360deg 使您回到 to top。

使用 background image 屬性建立線性、徑向或圓錐漸變。

使用 linear-gradient 關鍵字建立線性漸變。

使用 -moz-、-o- 和 -webkit- 作為 linear-gradient 關鍵字的字首，以支援舊版瀏覽器

#corpnav, #searchbar { 
  color: #999; 
  background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Opera 11.1 and 12 */
  background-image: -moz-linear-gradient(top,rgb(49,49,49),rgb(7,7,7)); /* for Firefox 3.6-15 */
  background-image: -webkit-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Chrome 10-25, Safari 5.1 and 6 */
  background-image: linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for IE 10+, Edge, Safari 6.1+, Opera 12.1+, Chrome 26+, Firefox 16+ */
}

color-interpolation-method:

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  
 = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

平滑或條紋漸變

/* This is smooth */
 background: linear-gradient(deepskyblue, tomato);

 /* This is striped */
 background: linear-gradient(deepskyblue 50%, tomato 50%);

不重複

雙色連續漸變

Css 程式碼	描述	預覽影像
linear-gradient(in lab to right, white, #01E)	CIE Lab 漸變，它避免了過暗的中點，但有明顯的紫色色調；
linear-gradient(in srgb to right, white, #01E)	gamma 編碼的 sRGB 漸變，在中點處過暗，略微不飽和，並且具有輕微的紫色色調
linear-gradient(in Oklab to right, white, #01E)	Oklab 漸變，提供更感知一致的結果，沒有任何紫色色調
linear-gradient(in Oklab to right, #44C, #795)	Oklab 漸變，感知一致的結果，沒有任何紫色色調
linear-gradient(in Oklab to right, black, #01E)	Oklab 漸變，感知一致的結果

各種顏色空間中的灰色漸變

srgb
srgb-linear
display-p3
a98-rgb
prophoto-rgb
rec2020
lab
Oklab 漸變，感知一致的結果
xyz
xyz-d50
xyz-d65

hsl 更短的色調
hsl 更長的色調
hsl 色調遞增
hsl 色調遞減

hwb 更短的色調
hwb 更長的色調
hwb 色調遞增
hwb 色調遞減

待辦事項：hwb、lch、oklch。x 更短 | 更長 | 遞增 | 遞減 ] 色調

Css 程式碼	描述	預覽影像
linear-gradient(in Oklab to right, black, white)	Oklab 漸變，感知一致的結果
linear-gradient(in lab to right, black, white)	lab 漸變，
linear-gradient(in srgb to right, black, white)	srgb 漸變
linear-gradient(to right, hsla(0, 0%, 0%, 0.8), transparent)
linear-gradient(in srgb to right, black, white)
linear-gradient(cyan, yellow);	組合緩動函式和多個顏色停靠點來建立比普通線性漸變看起來更平滑的近似值

多色漸變（多位置顏色停靠點），連續和條紋

Css 程式碼	描述	預覽影像
linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);	VIBGYOR 彩虹
linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);	每種顏色的第二個顏色停靠點與相鄰顏色的第一個顏色停靠點位於相同位置，從而產生條紋效果。

圓錐漸變

多位置顏色停靠點，相鄰顏色具有相同的顏色停靠點值，從而產生條紋效果

色輪 方便比較以極座標或圓柱座標表示的顏色，例如 hsl()、hwb() 或 lch()。

RGBA 色輪 色輪方便比較以極座標或圓柱座標表示的顏色，例如 hsl()、hwb() 或 lch()。

HSLA 色輪

HSL 色輪

• 色調從 0 度到 360 度變化
• 飽和度保持不變，最大值為 100%
• 亮度保持不變，最大值為 100%
• 更長的色調插值方法

連結

• Lea Verou 的 conic-gradient

參考文獻

CSS3 線性漸變