CSS 漸變
漸變背景
CSS 漸變允許您在兩個或多個指定的顏色之間顯示平滑的過渡。
CSS 定義了三種類型的漸變
- 線性漸變（從上/下/左/右/對角線方向）
- 徑向漸變（由中心定義）
- 錐形漸變（圍繞中心點旋轉）
CSS 線性漸變
要建立線性漸變，您必須定義至少兩個顏色停止點。顏色停止點是您想要平滑過渡的顏色。您還可以設定漸變效果的起始點和方向（或角度）。
語法
background-image: linear-gradient(方向, 顏色停止點1, 顏色停止點2, ...);
方向 - 從上到下（這是預設值）
下面的示例顯示了一個從頂部開始的線性漸變。它從紅色開始，過渡到黃色
從上到下（預設）
方向 - 從左到右
下面的示例顯示了一個從左側開始的線性漸變。它從紅色開始，過渡到黃色
從左到右
方向 - 對角線
透過指定水平和垂直起始位置，您可以建立對角線漸變。
下面的示例顯示了一個從左上角開始（到右下角結束）的線性漸變。它從紅色開始，過渡到黃色
從左上到右下
使用角度
如果您想更精確地控制漸變方向，可以使用角度代替預定義的（從下到上，從上到下，從左到右，從右到左，從左下到右上等）方向。0deg 等同於“到頂部”。90deg 等同於“到右邊”。180deg 等同於“到底部”。
語法
background-image: linear-gradient(角度, 顏色停止點1, 顏色停止點2);
下面的示例演示瞭如何線上性漸變中使用角度
180deg
使用多個顏色停止點
下面的示例顯示了一個帶有多個顏色停止點的線性漸變（從上到下）
下面的示例展示瞭如何建立彩虹色和一些文字的線性漸變（從左到右）
彩虹背景
示例
#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));
}
自己動手試一試 »
重複 linear-gradient
repeating-linear-gradient() 函式用於重複線性漸變
示例
重複的線性漸變
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
自己動手試一試 »
