聊一聊CSS3的漸變——gradient

關於漸變

時下，漸變（gradient）效果在頁面設計中已經變得越來越常見了。而且現在的CSS3對於漸變的支援也已經足夠的豐富了。雖然我們可能使用過CSS3中的line-gradient屬性或radial-gradient屬性，但其實CSS3中的漸變功能比我們想象的要強大的多，加以利用會實現很多有趣好玩的東西。本文就來討論CSS3中的漸變。

taobao首頁的按鈕和導航欄都使用了css漸變

基礎語法

如果你之前使用過CSS3的漸變，對於下面的CSS程式碼一定有所瞭解：

<div class="gradient_bg">
</div>

<style>
  .gradient_bg {
    background-image: linear-gradient(gold, #FF837E);
    height: 84px;
    width: 100%;
  }
</style>
複製程式碼

他的執行結果如下：

這是一個由上到下、由金色到粉色的漸變色塊

linear-gradient()方法的語法看上去還是很清晰的——從某個顏色漸變到另一個顏色。

但是如果要實現下面的幾種漸變效果該如何做呢？

這個是由左到右漸變的色塊，並且漸變過程只發生在中間一小部分內

這個是由中心向外漸變的色塊

這是一個類似“桌布”的div，他也是利用漸變來實現的。。。

我們先來看看linear-gradient的完整語法：

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  
複製程式碼

在CSS語法的說明中，尖括號括起來的部分代表資料型別，如<angle>代表角度資料型別，<image>資料型別。關於更多的資料型別，可以檢視MDN的文件

解釋一下：

<angle>| to <side-or-corner> 這個在上面的程式碼示例中並沒有使用，它是用來描述漸變發生的方向或角度的。未指定時，預設是由上至下進行漸變。

<angle>：代表的是漸變發生的方向或角度。角度向順時針增加。取值如：45deg、-120deg等等。其中角度是指相對縱座標而形成的角度。

關於角度單位不僅只有deg，還有grad和turn，比如順時針旋轉90°的話，下面三種是同樣的效果，90deg、100grad、.25turn。再比如順時針旋轉一週的話（360°），下面三種也是同樣的效果，360deg、400grad、1turn

此圖解釋了漸變角度的計算方式

<side-or-corner>：直譯成中文是“邊或角”，也就是說這個值表明了漸變指向哪個邊或哪個角。他的取值由一個或兩個關鍵字組成，包括垂直關鍵字（top和bottom）和水平關鍵字（left和right），如：to left ；to left top等等。下面是用藍色向黃色漸變的示例來表示方向值所對應的效果:

<color-stop>：由一個<color>值組成，並且跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸變軸的<length>）。取值如：#FF837E 80%或者 blue 30px。

通過以上對於linear-gradient的解釋，讓我們重新考慮一下上面提到的色塊如何實現。

這個是由左到右漸變的色塊，並且漸變過程只發生在中間一小部分內

根據描述，我們可以知道下面的資訊：

漸變方向：由左向右（當然你也可以逆向思維，變成由右向左）
漸變位置：漸變是發生在中間的一小部分，我們可以估算為整個區間的20%

所以程式碼可以寫成下面的樣子：

div {
  background-image: linear-gradient(to right, gold 40%, #FF837E 60%);
}
複製程式碼

至此，我們已經研究的漸變都是基於直線方向上的漸變。然而在實際應用場景中，還有CSS為<gradient>提供的功能都遠遠超過這個範疇。

實際情況是，CSS漸變可分為三大類：

線性漸變
徑向漸變
重複漸變

此圖解釋了各類漸變的表象

接下來，來說一說其他幾類漸變

徑向漸變

徑向漸變的語法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
複製程式碼

語法說明看上去很難懂，可以簡化一下：

radial-gradient(shape size position, color-stop[...,color-stop]);
複製程式碼

從簡化後的說明中可以看出，radial-gradient()方法包含兩組引數，第一組描述的徑向漸變特有的資訊，第二組引數與線形漸變一樣，描述的是顏色漸變的規則。

position：代表徑向漸變的圓心位置，語法和線形漸變中的side-or-corner語法很像，同樣支援關鍵字，也支援距離左上角的座標位置（包括px和百分比單位等）。預設值是中心點。
shape：指明徑向漸變的形狀，可以為circle或者ellipse，從字面意思可知，circle表示圓形，ellipse表示橢圓形。預設為ellipse。
size：代表徑向漸變範圍的半徑大小，當shape為ellipse時，size需要指定兩個值，如：20% 30%；其中第一個值 20%代表相對於元素寬度的20%，而30%代表相對於元素高度的30%。size還可以用一些關鍵字來進行描述；如下圖（知乎怎麼插入表格啊？）

圖片截至【前端Talkking】@sf

color-stop：與線形漸變一致，這裡不再贅述。

需要注意的是，當shape取值為circle時，size不能設定為百分數。

舉幾個例子，來加強記憶。

    .radial_1 {
      /*最簡單的漸變：由中心到四周，由藍色到黃色*/
      background-image: radial-gradient(blue, yellow);
    }
    .radial_2 {
      /*半橢圓形漸變：由左側中心點到四周，有藍色到黃色*/
      background-image: radial-gradient(ellipse 100% 50% at left center, blue, yellow);
    }
    .radial_3 {
      /*左上角到右下角的發散式漸變*/
      background-image: radial-gradient(circle farthest-corner at left top, blue, yellow);
    }
    .radial_4 {
      /*指定顏色漸變範圍*/
      background-image: radial-gradient(ellipse 50% 30%, blue 30%, yellow 70%);
    }
複製程式碼

重複漸變

重複漸變分為兩種：線形重複漸變和徑向重複漸變。

其中的線形重複漸變——repeating-linear-gradient()的語法如下：

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              Definition of the gradient line         List of color stops  
複製程式碼

徑向重複漸變的語法如下：

repeating-radial-gradient( 
       [[ circle  || <length> ]                     [at <position>]? , | 
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
        \---------------------------------------------------------------/\--------------------------------/
                  Contour, size and position of the ending shape               List of color stops  
複製程式碼

聰明的你一定發現了，這兩個的語法與非重複的語法是一模一樣的。本篇不準備著重講解重複漸變，如果今後有時間會為大家進行詳細講解。

其他知識點

說過了語法，接下來解釋一下其他的一些概念。

突然變色

顏色從中間突然發生變化，看上去是兩個完整的色塊

“如果多個色標具有相同的位置，他們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最後一個指定值。從效果上看，顏色會在那個位置突然變化，而不是一個平滑的漸變過程。”
——CSS影象（第三版）（w3.org/TR/css3-ima…

要想實現上面的效果，程式碼可以寫成下面的樣子：

    div {
      background-image: linear-gradient(to right, blue 50%, yellow 50%);
    }
複製程式碼

但是你會發現為了實現這種“突然變色”的效果，每次修改尺寸時你都需要修改兩處（上面的兩個50%）。不過好在CSS的規範中有下面的規定：

“如果某個色標的位置值比整個列表中在它之前的色標的位置都要小，則該色標的位置會被設定為它前面所有色標位置值的最大值。”
——CSS影象（第三版）（w3.org/TR/css3-ima…

所以，我們可以將第二個色標的位置值設定為0，那麼第二個色值的起始位置永遠是第一個色值的結束位置。加大了程式碼的可維護性。

    div {
      background-image: linear-gradient(to right, blue 50%, yellow 0);
    }
複製程式碼

<gradient>資料型別

上面我們說的三種漸變都屬於CSS資料型別中的<gradient>型別，而<gradient>資料型別又是<image>資料型別的子型別。所以有時能應用到<image>的地方同樣也可以應用到<gradient>，比如我們可以利用border-image屬性來實現邊框的漸變。如下面的效果：

    .border_gradient {
      border: 10px solid transparent;
      border-image: linear-gradient(to right, blue, yellow) 10;
    }
複製程式碼

篇幅有限，這裡就不對border-image屬性進行展開了。

多層級背景

background-image是允許繪製多個背景影象的，他們按照Z軸方向進行堆疊式的擺放，最先指定的影象在最上層。那麼基於這個特性，我們可以繪製出很多複雜好玩的效果出來，最先想到的就是網格效果。

上面提到的桌布效果

    .grid {
      background-color: white;
      background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
                        linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
      /*這裡使用rgba，使顏色的透明度為50%*/
      background-size: 50px 50px;
    }
複製程式碼

其實“桌布效果”是由橫豎兩個線形漸變混合，再加上background-color形成的。