聊一聊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漸變可分爲三大類：

1. 線性漸變
2. 徑向漸變
3. 重複漸變

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

接下來，來講一說其餘幾類漸變

徑向漸變

徑向漸變的語法：

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造成的。

上面爲橫向漸變，下面爲縱向了漸變

更多好玩的漸變：

下面推薦兩個利用CSS漸變實現的網站，上面有各類有趣好玩的實踐例子。

bennettfeely.com/gradients/

lea.verou.me/css3pattern…

謝謝支持：

若是您以爲這篇文章對於您有幫助，請關注微信公衆號——「較真的前端」。

這裏有更多更好玩的前端知識分享。

參考文章：

• 《CSS揭祕》——Lea Verou
• 【前端Talkking】CSS3系列-css3之線性漸變初探​
  
• 【前端Talkking】CSS系列-css3之徑向漸變初探​
  
• <gradient>
• CSS Image Values and Replaced Content Modules Level 3