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

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

CSS中如何給背景填充漸變色

在CSS中，我們可以使用線性漸變（Linear Gradient）或者徑向漸變（Radial Gradient）來(lái)給背景填充漸變色。

線性漸變

線性漸變是沿著一條直線進(jìn)行顏色過(guò)渡的漸變效果，我們可以通過(guò)設(shè)置漸變的起始顏色和結(jié)束顏色，以及漸變的起始位置和結(jié)束位置來(lái)實(shí)現(xiàn)線性漸變效果。

我們可以將背景色設(shè)置為從紅色到藍(lán)色的線性漸變：

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

在上面的代碼中，to right表示漸變的起始位置在左側(cè)，結(jié)束位置在右側(cè)，我們還可以設(shè)置漸變的起始角度和結(jié)束角度，以及漸變的起始顏色和結(jié)束顏色。

徑向漸變

徑向漸變是從一個(gè)點(diǎn)向周圍進(jìn)行顏色過(guò)渡的漸變效果，我們可以通過(guò)設(shè)置漸變的起始顏色和結(jié)束顏色，以及漸變的起始位置和結(jié)束位置來(lái)實(shí)現(xiàn)徑向漸變效果。

我們可以將背景色設(shè)置為從紅色到藍(lán)色的徑向漸變：

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

在上面的代碼中，circle表示漸變的起始位置是一個(gè)點(diǎn)，結(jié)束位置是一個(gè)圓，我們還可以設(shè)置漸變的起始形狀和結(jié)束形狀，以及漸變的起始顏色和結(jié)束顏色。

CSS提供了豐富的漸變效果，我們可以根據(jù)自己的需求進(jìn)行設(shè)置，實(shí)現(xiàn)各種炫酷的視覺(jué)效果。