CSS實(shí)現(xiàn)漸變背景的方法

在CSS中，我們可以使用線性漸變（linear-gradient）或徑向漸變（radial-gradient）來(lái)實(shí)現(xiàn)漸變背景。

線性漸變是從一個(gè)顏色到另一個(gè)顏色的直線過(guò)渡，我們可以通過(guò)設(shè)置兩個(gè)顏色值，以及它們的方向（從頂部到底部，或從左側(cè)到右側(cè)），來(lái)創(chuàng)建線性漸變背景。

以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的線性漸變背景：

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

我們還可以設(shè)置漸變的起始點(diǎn)和終止點(diǎn)，以及它們的顏色，以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的線性漸變背景，其中紅色從上方開(kāi)始，藍(lán)色從下方開(kāi)始：

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

徑向漸變則是從一個(gè)顏色到另一個(gè)顏色的圓形過(guò)渡，我們可以設(shè)置一個(gè)顏色值作為中心顏色，另一個(gè)顏色作為邊緣顏色，以及漸變的形狀（圓形或橢圓形）。

以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的徑向漸變背景：

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

我們還可以設(shè)置漸變的起始點(diǎn)和終止點(diǎn)，以及它們的顏色，以下代碼將創(chuàng)建一個(gè)從紅色到藍(lán)色的徑向漸變背景，其中紅色從中心開(kāi)始，藍(lán)色從邊緣開(kāi)始：

body {
  background: radial-gradient(red, blue, red 0%, blue 100%);
}

通過(guò)以上的方法，我們可以輕松地創(chuàng)建出具有漸變背景效果的網(wǎng)頁(yè)。