漸變通常是一種顏色逐漸淡入另一種顏色，但是CSS允許你控制顏色發生的各個方面，從方向和形狀到顏色以及它們如何從一種過渡到另一種。實際上，存在三種類型的漸變：

線性漸變

徑向漸變

圓錐形漸變

三種漸變對應的語法是：

/* Basic linear gradient examples */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

 
/* Basic radial gradient examples */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/* Basic conic gradient examples */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);
 

下面來分別為大家講講這三種漸變。

線性漸變

這也許是我們在網頁設計中看到的最常見的漸變方案了（linear-gradient()）。之所以稱它為“線性漸變”，是因為顏色是從左到右，從上到下或沿著單個方向選擇的任何角度流動的。

語法：

實現漸變的方法就是在css中的 background 或 background-image屬性宣告。

也就是建立一個背景影象，該背景影象是線性漸變，以[朝這個方向或角度]移動，

並以[一種顏色]開始，以[另一種顏色]結束。

官方語法：

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]
 

實踐：

我們來做一個從頂部到底部的漸變圖案。

.gradient {
  background-image: linear-gradient(#ff8a00, #e52e71);
}

上面的程式碼中，我們並沒有宣告角度或漸變方向。CSS將 to bottom在這種情況作為預設，其中 #ff8a00 的起始顏色是過渡到 #e52e71.

上面的是簡寫，我們也可以寫成這樣：

/* 宣告方向 */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);

/* 角度宣告 */
background-image: linear-gradient(180deg, #ff8a00, #e52e71);

漸變方向

為了使顏色變化從左到右，我們在 linear-gradient() 函式的開頭傳遞了一個附加引數，以 to 指示方向的單詞開頭。讓我們將屬性值分成幾行，以便輕鬆地瞭解發生了什麼。

.gradient {
  background-image:
    linear-gradient(
      to right,
      #ff8a00, #e52e71
    );
}

一個顏色從元素的左邊緣過渡到右邊緣就搞定了。

to 語法也適用於轉角。例如：如果你希望漸變的軸從左下角到右上角，則可以宣告：

to top right

.gradient {
  background-image:
    linear-gradient(
      to top right,
      #ff8a00, #e52e71
    );
}

如果要漸變的區域是一個正方形，則可以宣告漸變的角度為 45deg。

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      #ff8a00, #e52e71
    );
}

多種顏色的漸變

我們不僅限於兩種顏色的變化。實際上，我們可以根據需要來用逗號分隔多種顏色。

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

上面是四種顏色的漸變：

那麼線性漸變就講到這裡。

徑向漸變

徑向漸變與線性漸變的不同之處在於，它是從一個點開始並向外散發的。漸變通常用於模擬光源，我們知道它並不是筆直的。這使得徑向漸變中的顏色之間的過渡顯得更加自然。

語法：

在background或background-image屬性中使用 radial-gradient()函式就可以了。

官方語法：

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
);

指定漸變的中心、形狀（圓形或橢圓形）、大小。預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

用法：

.gradient {
  background-image:
    radial-gradient(
      #ff8a00,
      #e52e71
    );
}

上面定義一個最基本的徑向漸變，我們不宣告 shape， size， position 和 color-top 值。

改變形狀：

我們可以看到上面的圖形，shape 是 ellipse（預設）。那是因為元素本身不是一個完整的正方形，在那種情況下，它會假設一個 circle。如果我們宣告circle 為該shape值，看看會發生什麼：

.gradient {
  background-image:
    radial-gradient(
      circle,
      #ff8a00,
      #e52e71
    );
}

改變位置

我們可以看到，上面演示的漸變都是圓形的，並且一直沿著最遠的邊緣逐漸淡入最終顏色。我們可以顯式宣告 position 值。以確保淡入淡出以 close-side 的 shape 方式結束。

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      #ff8a00,
      #e52e71
    );
}

其中position的值可以為：closet-corner， closetside，farthest-corner和farthest-side。

徑向漸變其實不一定從預設中心開始，它可以通過 at 用作第一個引數的一部分來指定某個點。例如：

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      #ff8a00,
      #e52e71
    );
}

看效果：

徑向漸變就講到這裡。

圓錐漸變

圓錐漸變類似於徑向漸變。兩者都是圓形，並且使用元素的中心作為色標的源點。但是，如果徑向漸變的色標從圓的中心出發，則圓錐漸變會將它們放在圓周圍。

之所以稱它們為“圓錐形”，是因為它們看起來像從上方觀察的圓錐形。

語法：

conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

用法：

在最基本的水平上

.gradient {
  background-image:
    conic-gradient(
      #ff8a00, #e52e71
    );
}

假設漸變的位置從元素（50%，50%）的正中心開始，並且均勻分佈在兩個顏色值之間。

其他的寫法：

.gradient {
  /* Original example */
  background-image: conic-gradient(#ff8a00, #e52e71);
  /* Explicitly state the location center point */
  background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color */
  background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color and center point location */
  background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background-image: conic-gradient(#ff8a00 0%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);
}

如果我們不為顏色指定一個角度，則梯度的顏色是從 0deg 開始 360deg 結束的。如果我們引入第三個值，那麼將建立了一個更平滑的漸變，並且我們開始獲得那種酷似錐形的透檢視。

建立一個平滑的漸變

.gradient {
  background-image:
    conic-gradient(
      #ff8a00,
      #e52e71,
      #ff8a00
    );
}

在玩轉圓錐形漸變上，我們可以使用它來創建於拾色器圖案：

.conic-gradient {
  background-image:
    conic-gradient(
      red,
      yellow,
      lime,
      aqua,
      blue,
      magenta,
      red
    );
}

或者我們通過三個顏色值畫一個簡單的餅圖。

.gradient {
  background-image:
    conic-gradient(
      lime 40%,
      yellow 0 70%,
      red 0
    );
}

由於錐形漸變見的比較少，給大家看看瀏覽器支援情況吧！

迴圈漸變

重複漸變是我們可以通過創造性地使用color-stopsonlinear-gradient()和radial-gradient()符號來完成的一項技巧，併為我們投入使用。這個想法是，我們可以從建立的漸變中建立圖案，並允許它們無限迴圈。

語法

共有三種重複梯度，官方規範目前支援所有三種，當前工作草案中則支援一種。每個符號的語法與其相關的漸變型別相同。例如，repeating-linear-gradient()遵循與相同的語法linear-gradient()。

用法：

建立一個重複的線性漸變，它每隔10個畫素以45度角在兩種顏色之間交替變化：

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

我們可以做同樣的事情，但是要有一個徑向梯度。區別？除了符號本身，我們還定義形狀和起點：

.gradient {
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

圓錐漸變沒有太大的不同！同樣，徑向和圓錐形漸變之間的最大區別是圓錐形顏色在元素周圍過渡，其中徑向漸變中的顏色從漸變源的中心過渡。

.gradient {
  background-image:
    repeating-conic-gradient(
      from 0deg, 
      #ff8a00 0deg 30deg, 
      #e52e71 30deg 60deg
  );
}

一些例子：

當我們檢視重複的漸變時，我們看到了漸變如何建立有趣的圖案。但是我們可以建立許多其他模式！像棋盤一樣

.gradient-pattern {
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #333 25%,
      transparent 25%,
      transparent 75%,
      #333 75%,
      #333
    ),
    linear-gradient(
      -45deg,
      #333 25%,
      transparent 25%,
      transparent 75%,
      #333 75%,
      #333
    );
  background-size: 50px 50px;
  height: 250px;
}

我們還可以製作一個重複的V形圖案：

.gradient-pattern {
  background: linear-gradient(135deg, #333 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #333 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #333 25%, transparent 25%),
    linear-gradient(45deg, #333 25%, transparent 25%);
  background-size: 100px 100px;
  background-color: #ff8a00;
  height: 250px;
}

今天就先講到這吧！