如何用CSS實現漸變背景

使用CSS實現漸變背景非常簡單。CSS提供了兩種類型的漸變：線性漸變（linear-gradient）和徑向漸變（radial-gradient）。下面是兩種漸變的實現方法：

1. 線性漸變（linear-gradient）

線性漸變是沿著一條直線方向逐漸過渡的漸變?；菊Z法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction 是可選的，默認值為 to right，表示從左到右的漸變。color-stop 是顏色?？奎c，可以是顏色值，也可以是百分比。

示例：

/* 從左上角到右下角的線性漸變 */
background-image: linear-gradient(to bottom right, red, yellow, green);

/* 從上到下的線性漸變 */
background-image: linear-gradient(to bottom, red, yellow, green);

/* 從左上角到右下角的線性漸變，顏色?？奎c分別為紅色（0%）、黃色（50%）和綠色（100%） */
background-image: linear-gradient(to bottom right, red 0%, yellow 50%, green 100%);

2. 徑向漸變（radial-gradient）

徑向漸變是從一個中心點向外逐漸過渡的漸變?；菊Z法如下：

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

其中，shape 是可選的，默認值為 ellipse，表示橢圓形漸變。size 是可選的，表示漸變的大小。position 是可選的，默認值為 center，表示漸變的中心位置。color-stop 是顏色?？奎c，可以是顏色值，也可以是百分比。

示例：

/* 從中心到邊緣的徑向漸變 */
background-image: radial-gradient(circle, red, yellow, green);

/* 從左上角到右下角的徑向漸變 */
background-image: radial-gradient(circle at top left, red, yellow, green);

/* 從中心到邊緣的徑向漸變，顏色?？奎c分別為紅色（0%）、黃色（50%）和綠色（100%） */
background-image: radial-gradient(circle, red 0%, yellow 50%, green 100%);

你可以根據自己的需求調整漸變的方向、顏色和位置。