漸變是由兩種或多種顏色之間的漸進過渡組成，它是一種特殊的影象型別，分為線性漸變和徑向漸變，這兩類漸變還會細分為單次和重複兩種。漸變影象與傳統影象相比，它的優勢包括佔用更少的位元組，避免額外的伺服器請求，除錯成本更低等。在平時，發揮自己的想象，利用漸變可以創造出許多奇妙的視覺特效。

一、線性漸變

　　線性漸變會使用linear-gradient()函式，可沿著一條梯度線（gradient line），從某一邊或某個角度繪製漸變背景，該背景的預設方向是從元素頂部到底部，如下圖所示。

div {
  background: linear-gradient(#FC0, #F60);
}

1）梯度線

　　梯度線會穿過元素的中心點，沿順時針旋轉，如下圖所示，旋轉了50°。梯度線的起點是元素最近的頂點和梯度線的垂線的交叉點，終點是元素最遠的頂點和梯度線的垂線的交叉點，注意，垂線和梯度線都要在同一象限內。象限是指平面直角座標系中的橫軸和縱軸所劃分的四個區域。

　　圖中的0%和100%分別表示第一個和最後一個色標的位置，百分數參照的是梯度線的長度。注意，梯度線上的各點顏色會沿著垂直線向外延伸，如下圖所示。

2）方向

　　梯度線的方向可以結合關鍵字to向四條邊（top、bottom、left和right）延伸，預設是to bottom。下面的樣式會修改成向右漸變，效果如下圖所示。

div {
  background: linear-gradient(to right, #FC0, #F60);
}

　　將四條邊的關鍵字兩兩組合，再與to配合使用，可宣告成某個角度，例如top right表示右上象限。注意，不是右上角，也就是說，梯度線並不會穿過元素兩個對角的頂點。如下圖所示，to top right的梯度線是帶箭頭的實線而不是那條虛線。

　　除了使用關鍵字之外，還能通過deg單位指定角度，這樣能更直觀的改變梯度線的方向，例如30deg，如下程式碼所示，在宣告時不需要關鍵字to。

div {
  background: linear-gradient(30deg, #FC0, #F60);
}

3）色標

　　在指定方向後，就會跟一組用逗號隔開的色標，即標明顏色發生變化的位置。例如將#FC0放在梯度線20%的位置處，如下所示。

div {
  background: linear-gradient(30deg, #FC0 20%, #F60);
}

　　如果將兩個色標放在同一位置，那麼就能產生急變的效果（常用於實現條紋），如下程式碼所示。在下圖中，左邊是漸變影象，右邊是急變影象。

div {
  background: linear-gradient(30deg, #FC0 20%, #F60 20%);
}

　　當漸變尺寸明確設為0時，也能實現急變效果，樣式如下。

div {
  background: linear-gradient(30deg, #FC0 20%, #F60 0);
}

4）中色點

　　中色點的作用是修改兩側的混合模式，即定義相鄰顏色之間的漸變如何進行。預設情況下，中色點位於兩個顏色終止位置之間的中點。

　　以下面的樣式為例，由20%處的黃色（#FC0）過渡到100%處的橙色（#F60），二者的中點位置是60%。

div {
  background: linear-gradient(30deg, #FC0 20%, #F60);
}

　　當指定中色點時，需要省略顏色，如下程式碼所示，將中色點移到40%處，漸變效果如下圖的右側所示，左側是預設的漸變。

div {
  background: linear-gradient(30deg, #FC0 20%, 40% ,#F60);
}

二、徑向漸變

 　　徑向漸變會從一個原點向外輻射，覆蓋的範圍既可以是圓形也可以是橢圓，常用於聚光燈、水面波紋等效果。在實現徑向漸變時，會使用radial-gradient()函式，在函式中可宣告形狀、尺寸、中心點、色標等引數。

1）形狀和尺寸

　　可通過circle或ellipse兩個關鍵字，顯式地宣告漸變形狀，如下所示。

.circle {
  background: radial-gradient(circle, #FC0, #F60);
}
.ellipse {
  background: radial-gradient(ellipse, #FC0, #F60);
}

　　在下面的兩個樣式中，當宣告一個半徑時，可生成圓形漸變，效果如下圖的左側；當宣告兩個不同的半徑時，可生成橢圓漸變，效果如下圖的右側。

.circle {
  background: radial-gradient(20px, #FC0, #F60);
}
.ellipse {
  background: radial-gradient(50px 20px, #FC0, #F60);
}

　　注意，圓形的半徑不能設為百分數，而橢圓則可以。橢圓的第一個百分數半徑參照橫軸（背景影象的寬度），第二個參照縱軸（背景影象的高度），如下所示。

div {
  background: radial-gradient(25% 20%, #FC0, #F60);
}

　　除了通過長度和百分數的方式來指定漸變尺寸之外，還支援四個關鍵字，如下表所示，其中farthest-corner是徑向漸變的預設值。

　　在下圖中，將四個關鍵字分別應用於圓形和橢圓，為了便於觀察，改變了中心點的座標。

2）中心點

　　漸變區域的中心點可以設為background-position屬性的位置值，例如top right、30px 50px等，但為了區別漸變的尺寸值，需要用at分隔，如下所示。

div {
  background: radial-gradient(circle at 30px 50px, #FC0, #F60);
}

3）梯度射線

　　與線性漸變不同，徑向漸變的梯度射線（gradient ray）會從中心點向外延伸出無數條線，如下圖所示。當漸變是圓形時，梯度射線的終點與中心點的距離就是圓的半徑；當漸變是橢圓時，梯度射線的終點與中心點的距離由橢圓的橫軸決定。

三、重複漸變

　　線性漸變和徑向漸變都有對應的重複函式，前者是repeating-linear-gradient()，後者是repeating-radial-gradient()，重複次數由background-size屬性和元素尺寸決定。在下圖中，包含兩組漸變（樣式如下），其中每組的左側是漸變一次的效果，右側是重複漸變的效果。

.linear {
  background: linear-gradient(30deg, #FC0, #F60 30px);
}
.repeating-linear {
  background: repeating-linear-gradient(30deg, #FC0, #F60 30px);
}
.radial {
  background: radial-gradient(30px, #FC0, #F60);
}
.repeating-radial {
  background: repeating-radial-gradient(30px, #FC0, #F60);
}

　　重複漸變有許多巧妙的用法，例如生成條紋背景，樣式如下，效果如下圖所示。

.stripe {
  background: repeating-linear-gradient(30deg, transparent, transparent 10px, #F60 0, #F60 20px);
}