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

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

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

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

線性漸變

線性漸變是從一個(gè)顏色到另一個(gè)顏色的平滑過(guò)渡，我們可以通過(guò)設(shè)置div的background屬性來(lái)實(shí)現(xiàn)線性漸變，從紅色到藍(lán)色的漸變可以如下實(shí)現(xiàn)：

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
}

在這個(gè)例子中，linear-gradient函數(shù)接受兩個(gè)參數(shù)：漸變的方向（to right）和漸變的顏色（red, blue），這將會(huì)創(chuàng)建一個(gè)從紅色到藍(lán)色的水平漸變。

徑向漸變

徑向漸變是從一個(gè)顏色到另一個(gè)顏色的圓形過(guò)渡，同樣地，我們可以通過(guò)設(shè)置div的background屬性來(lái)實(shí)現(xiàn)徑向漸變，從紅色到藍(lán)色的徑向漸變可以如下實(shí)現(xiàn)：

div {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, red, blue);
}

在這個(gè)例子中，radial-gradient函數(shù)接受兩個(gè)參數(shù)：漸變的形狀（circle）和漸變的顏色（red, blue），這將會(huì)創(chuàng)建一個(gè)從紅色到藍(lán)色的圓形漸變。

需要注意的是，漸變的顏色可以設(shè)置為多種顏色，從而實(shí)現(xiàn)更復(fù)雜的漸變效果，漸變的形狀和方向也可以根據(jù)需要進(jìn)行調(diào)整。