# 概念
CSS linear-gradient() 函式建立一個表示顏色線性漸變的 <image> 。
簡單的說，元素只要用了linear-gradient，它等同於一張圖片。
即:
background：linear-gradient(...params) ~= background：url(...image)
所以它只能用在圖片可以用的地方。如：background、background-image。
不要把它當作顏色用在color等樣式中。
# 使用方式
簡單起見，只講一種最通用的使用方式。
background: linear-gradient(angle[角度], color-stop[起始顏色],color-stop[終點顏色]);
複製程式碼# 原理
angle描述漸變的方向，單位是deg，它的有效角度值是0-360deg。預設180deg。
幾個常用漸變角度分別為:
- 從下到上:0deg
- 從上到下:180deg
- 從左到右:90deg
- 從右到左:270deg
如下圖所示:
angle的值其實就是以向頂部中央方向為起點順時針旋轉的角度。
0deg時可以看作是上圖穿過矩形中心的黑色虛線。
這裡我們要理解下漸變線的概念:
漸變線由包含漸變圖形的容器的中心點和一個角度來定義的。漸變線上的顏色值是由不同的點來定義，包括起始點，終點，以及兩者之間的可選的中間點（中間點可以有多個）。
圖中示例了一個45deg經過矩形中心的漸變線，它的起點就是垂直於漸變線的紅點，終點是起點對應的反射點，也就是圖上的綠點。
這兩點的顏色分別對應著css程式碼中定義的始末色值，其間則是沿著漸變線不斷變化的色值。
不需多言，盡在圖中。
# 示例
1 0deg 藍色起點 紅色終點
background: linear-gradient(0deg, blue, red);
複製程式碼
2 45deg 藍色起點 紅色終點
background: linear-gradient(45deg, blue, red);
複製程式碼