簡解Css3 - linear-gradient

# 概念

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);
複製代碼

# 參考

• MDN-linear-gradient