CSS 漸變

漸變背景

CSS 漸變使您可以顯示兩種或多種指定顏色之間的平滑過渡。

CSS 定義了兩種漸變類型：

  • 線性漸變（向下/向上/向左/向右/對角線）
  • 徑向漸變（由其中心定義）

CSS 線性漸變

如需創建線性漸變，您必須定義至少兩個色標。色標是您要呈現平滑過渡的顏色。您還可以設置起點和方向（或角度）以及漸變效果。

語法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

線性漸變 - 從上到下（默認）

下面的例子顯示了從頂部開始的線性漸變。它從紅色開始，過渡到黃色：

從上到下（默認）

實例

#grad {
  background-image: linear-gradient(red, yellow);
}

親自試一試

線性漸變 - 從左到右

下面的例子展示了從左開始的線性漸變。它從紅色開始，過渡到黃色：

從左到右

實例

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

親自試一試

線性漸變 - 對角線

您可以通過指定水平和垂直起始位置來實現對角漸變。

下面的例子展示了從左上角開始（到右下角）的線性漸變。它從紅色開始，過渡到黃色：

左上到下右

實例

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

親自試一試

使用角度

如果希望對漸變角度做更多的控制，您可以定義一個角度，來取代預定義的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

180deg

語法

background-image: linear-gradient(angle, color-stop1, color-stop2);

這個角度指定水平線和漸變線之間的角度。

下面的例子展示了如何在線性漸變上使用角度：

實例

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

親自試一試

使用多個色標

下面的例子展示了帶有多個色標的線性漸變（從上到下）：

實例

#grad {
  background-image: linear-gradient(red, yellow, green);
}

親自試一試

下面的例子展示了如何使用彩虹色和一些文本創建線性漸變（從左到右）：

漸變背景

實例

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

親自試一試

使用透明度

CSS 漸變還支持透明度，也可用于創建漸變效果。

如需添加透明度，我們使用 rgba() 函數來定義色標。 rgba() 函數中的最后一個參數可以是 0 到 1 的值，它定義顏色的透明度：0 表示全透明，1 表示全彩色（無透明）。

下面的例子展示了從左開始的線性漸變。它開始完全透明，然后過渡為全色紅色：

實例

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

親自試一試

重復線性漸變

repeating-linear-gradient() 函數用于重復線性漸變：

實例

重復的線性漸變：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

親自試一試