本文目錄導(dǎo)讀：

1. 線性漸變
2. 徑向漸變

CSS實現(xiàn)顏色漸變的方法

在CSS中，我們可以使用線性漸變（Linear Gradients）或者徑向漸變（Radial Gradients）來實現(xiàn)顏色的漸變效果。

線性漸變

線性漸變是從一個顏色到另一個顏色的平滑過渡，它可以在一個元素上創(chuàng)建一個單色的漸變色帶，我們可以通過設(shè)置linear-gradient函數(shù)來定義漸變的起始顏色和結(jié)束顏色。

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

在這個例子中，我們定義了一個從紅色到紫色的線性漸變背景。to right關(guān)鍵字表示漸變的方向是向右，你也可以選擇其他方向，比如to top、to left等。

徑向漸變

徑向漸變是從一個顏色到另一個顏色的圓形過渡，它可以在一個元素上創(chuàng)建一個多色的漸變色帶，我們可以通過設(shè)置radial-gradient函數(shù)來定義漸變的起始顏色和結(jié)束顏色。

div {
  background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet);
}

在這個例子中，我們定義了一個從紅色到紫色的徑向漸變背景。circle關(guān)鍵字表示漸變的形狀是圓形，你也可以選擇其他形狀，比如ellipse（橢圓）、circle at center（中心圓形）等。

無論是線性漸變還是徑向漸變，它們都可以為我們提供豐富的顏色漸變效果，讓網(wǎng)頁更加生動、多彩。