CSS3 色彩漸變是 CSS3 技術(shù)中的一大亮點(diǎn)，它可以讓網(wǎng)頁設(shè)計(jì)更加絢麗多彩。CSS3 色彩漸變主要包括線性漸變和徑向漸變，下面我們分別介紹一下。

線性漸變

線性漸變又稱為一維漸變，是指沿直線方向逐漸從一種顏色過渡到另一種顏色。CSS3 線性漸變的常用語法如下：

.background {
background: linear-gradient(to right, red, blue);
}

上述代碼表示將背景色從左側(cè)的紅色漸變?yōu)橛覀?cè)的藍(lán)色。其中，to right表示漸變方向?yàn)閺淖蟮接遥部梢栽O(shè)置為to left、to top、to bottom等方向。

我們還可以設(shè)置多個(gè)顏色點(diǎn)，如下代碼：

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

上述代碼將背景色從左側(cè)的紅色漸變?yōu)橛覀?cè)的紫羅蘭色，中間包含了紅、橙、黃、綠、藍(lán)、靛、紫等多個(gè)顏色點(diǎn)。

徑向漸變

徑向漸變又稱為二維漸變，是指從一個(gè)點(diǎn)開始，沿著半徑方向逐漸從一種顏色過渡到另一種顏色。CSS3 徑向漸變的常用語法如下：

.background {
background: radial-gradient(circle, red, blue);
}

上述代碼表示將背景色從中心點(diǎn)向四周漸變，從紅色漸變到藍(lán)色。其中，circle表示漸變形狀為圓形，也可以設(shè)置為ellipse橢圓形。

我們還可以設(shè)置多個(gè)顏色點(diǎn)和半徑，如下代碼：

.background {
background: radial-gradient(circle at 50% 50%, red, orange, yellow, green, blue, indigo, violet);
}

上述代碼將背景色從中心點(diǎn)向四周漸變，中間包含了紅、橙、黃、綠、藍(lán)、靛、紫等多個(gè)顏色點(diǎn)，并且半徑為屏幕寬度的一半，水平和垂直方向居中。

總之，CSS3 色彩漸變可以讓網(wǎng)頁設(shè)計(jì)更加豐富多彩，你可以根據(jù)實(shí)際需求來靈活運(yùn)用。