CSS背景漸變色

在CSS中，可以使用線性漸變（Linear Gradient）或徑向漸變（Radial Gradient）來(lái)實(shí)現(xiàn)背景漸變色。

線性漸變可以通過(guò)設(shè)置兩個(gè)或多個(gè)顏色點(diǎn)來(lái)創(chuàng)建，這些顏色點(diǎn)可以是任何有效的CSS顏色值，以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的線性漸變背景：

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

這將使背景從左側(cè)開(kāi)始，逐漸過(guò)渡到右側(cè)的顏色，您還可以設(shè)置漸變的起始點(diǎn)和結(jié)束點(diǎn)，

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

這將使背景從左側(cè)開(kāi)始，逐漸過(guò)渡到右側(cè)的顏色，其中紅色在50%的位置開(kāi)始過(guò)渡，藍(lán)色在100%的位置結(jié)束過(guò)渡。

徑向漸變則是從中心開(kāi)始，向四周擴(kuò)散的漸變效果，以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的徑向漸變背景：

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

這將使背景從中心開(kāi)始，逐漸擴(kuò)散到四周的顏色，您還可以設(shè)置漸變的形狀和大小，

body {
  background: radial-gradient(ellipse at top, red, blue);
}

這將使背景從上方開(kāi)始，逐漸擴(kuò)散到下方的顏色，形狀為橢圓形。

是CSS實(shí)現(xiàn)背景漸變色的一些基本方法，您可以根據(jù)自己的需求進(jìn)行調(diào)整和擴(kuò)展。