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

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

CSS3實(shí)現(xiàn)頁(yè)面漸變鋪滿效果

在CSS3中，我們可以使用線性漸變（Linear Gradient）或者徑向漸變（Radial Gradient）來(lái)實(shí)現(xiàn)頁(yè)面漸變的鋪滿效果。

線性漸變

線性漸變是從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的漸變，可以通過(guò)設(shè)置漸變的起點(diǎn)和終點(diǎn)顏色，以及漸變的形狀和方向來(lái)實(shí)現(xiàn)。

我們可以設(shè)置背景色為從頂部到底部的線性漸變，代碼示例如下：

body {
  background: linear-gradient(to bottom, #ff0000, #00ff00);
}

上述代碼會(huì)將背景色設(shè)置為從紅色（#ff0000）到綠色（#00ff00）的線性漸變，漸變的形狀為直線，方向?yàn)閺捻敳康降撞俊?/p>

徑向漸變

徑向漸變是從一個(gè)點(diǎn)向周?chē)鷶U(kuò)散的漸變，可以通過(guò)設(shè)置漸變的中心點(diǎn)和漸變的顏色來(lái)實(shí)現(xiàn)。

我們可以設(shè)置背景色為從中心向四周的徑向漸變，代碼示例如下：

body {
  background: radial-gradient(circle, #ff0000, #00ff00);
}

上述代碼會(huì)將背景色設(shè)置為從紅色（#ff0000）到綠色（#00ff00）的徑向漸變，漸變的形狀為圓形，中心為頁(yè)面的中心。

需要注意的是，上述代碼僅適用于支持CSS3漸變的瀏覽器，對(duì)于不支持CSS3漸變的瀏覽器，可以使用圖片或者JavaScript來(lái)實(shí)現(xiàn)相似的效果。