CSS 屬性篇(九)：linear-gradient()介紹與使用

1、基本介紹

CSS linear-gradient() 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。
複製代碼

1.1 語法：

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

<angle>
  用角度值指定漸變的方向（或角度）。角度順時針增長。

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

<color-stop>
  由一個<color>值組成，而且跟隨着一個可選的終點位置（能夠是一個百分比值或者是沿着漸變軸的<length>）。
複製代碼

2、漸變角度

2.1 漸變角度定義

linear-gradient是經過漸變的角度來控制漸變的方向。漸變角度值是漸變線與漸變容器中心點向上垂直線之間的夾角。

能夠經過下面兩種方法來定義這個角度

• 使用關鍵詞：to top、to bottom、to left、to right、to top right、to top left、to bottom right和to bottom left（這些值會被轉換爲指定的角度值）
• 使用帶單位數字定義角度，好比45deg、1turn等

若是省略角度值的設置，那默認是to bottom（對應180deg或者.5turn）

2.2 頂角關鍵詞

在使用頂角關鍵詞時須要注意，若是你想要一個red至blue的漸變，方向是 to top right，以下圖所示：

頂角關鍵字並不意味着漸變線穿過右上角，而是漸變線首先經過元素中心點而且與頂點垂直相交，與中心點垂直線構成指定的夾角。

3、漸變色節點

<color-stop>由一個<color>值組成，而且跟隨着一個可選的終點位置（能夠是一個百分比值或者是沿着漸變軸的<length>）。

3.1 顏色節點沒有指定位置

若是沒有顯式指定顏色在漸變線上的位置，這將交給瀏覽器來肯定顏色在漸變線上的位置。
最簡單的狀況下只有兩個顏色，顏色1將被放置在漸變線0%位置（漸變線開始位置），顏色2將被放置在100%位置處（漸變線的結束點）。
若是有三個顏色，那麼顏色1在漸變線的0%，顏色2在漸變線的50%，顏色3在漸變線的100%。
在下面的這個示例中，有五個顏色，那麼它們的位置分別在0%、25%、50%、75%和100%。它們將沿着漸變線平均分佈漸變顏色。

3.2 顏色節點所有指定位置

你也能夠在漸變線上顯式自定義漸變顏色在漸變線的位置。每一個位置能夠用百分比表示（相對於漸變線計算），也能夠是任何一個CSS長度單位。

3.3 部分顏色節點指定位置

若是部分漸變色節點沒有設置位置，那麼瀏覽器將會根據它上一個已知的位置和下一個已知的位置，均勻的分佈在這個區間內。 在上圖中，只有第三個顏色yellow指定了位置，在漸變線的30%處。爲了很好的分發，它把第一個顏色red放置在漸變線的0%處，最後一個顏色放置在漸變線的100%處。第二個顏色orange放置在漸變線0%至30%的中間位置，第四個顏色red放置在漸變線30%至100%中間位置。

在上圖中只有第一個和最後一個顏色放置在漸變線指定位置，剩下的顏色平均分佈在二者之間。

3.4 多色變化

若是下一個顏色的開始位置是在上一個顏色結束位置，這意味着瀏覽器不須要填滿兩個顏色之餘間的空間。

3.5 顏色節點位置糾正處理

若是後面顏色的位置值比前面顏色的位置值更小時，瀏覽器會自動作相應的糾正處理。

第一個顏色red開始，其定位在漸變線的30%位置處，第二個顏色orange在10%位置，但這是錯誤的。 這個時候，瀏覽器將會糾正第二個顏色的位置，它將會和前一個顏色的位置同樣，也分佈在漸變線的30%位置。 而後第三個顏色yellow分佈在漸變線的60%位置處，但緊隨其後的第四個顏色爲40%，瀏覽器一樣會糾正並設置其位置與前一個顏色位置相同。

4、兼容性

5、linear-gradient()的使用

5.1 條紋背景

傳統作法

經過背景圖像平鋪顏色條圖片

新的思路

「若是多個色標具備相同的位置，它們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最後一個指定值。
從效果上看，顏色會在那個位置忽然變化，而不是一個平滑的漸變過程。」

-- CSS圖像（第三版）
複製代碼

• 根據linear-gradient()若是下一個顏色的開始位置是在上一個顏色結束位置，這意味着瀏覽器不須要填滿兩個顏色之餘間的空間，能夠建立2條顏色條紋；

• 而後經過background-size設置其尺寸；

• 最後因爲背景默認狀況下是重複平鋪的，水平條紋就會被填滿整個背景。

body{
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;
}
複製代碼

擴展-斜向條紋背景

body{
    background: linear-gradient(45deg, 
        red 25%, blue 0,blue 50%,
        red 0, red 75%, blue 0);
    background-size: 50px 50px;
}
複製代碼

5.2 網格背景

傳統作法

經過背景圖像平鋪圖片

新的思路

首先經過linear-gradient()建立水平和垂直白線；
而後將兩者疊加起來。

body {
    background: #58a;
    background-image: 
        linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;
}
複製代碼

5.3 棋盤背景

傳統作法

經過背景圖像平鋪圖片。

新的思路

第一步：

首先使用linear-gradient(45deg)能夠建立直角三角形；
而後將第二層漸變在水平和垂直方向均移動貼片長度的一半，就可以將2個直角三角形拼合就造成了可咱們想要的方塊；

body{
    background-image: 
		linear-gradient(45deg, red 25%, transparent 0),
		linear-gradient(45deg, transparent 75%, blue 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}
複製代碼

第二步：

body {
	background-image: 
		linear-gradient(45deg, #666 25%, transparent 0, transparent 75%, #666 0),
		linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}
複製代碼

以上案例示例代碼：codepen.io/madman0621/…

參考：

你真的理解CSS的linear-gradient？--大漠