如何用CSS实现渐变背景

使用CSS实现渐变背景非常简单。CSS提供了两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。下面是两种渐变的实现方法：

1. 线性渐变（linear-gradient）

线性渐变是沿着一条直线方向逐渐过渡的渐变。基本语法如下：

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

其中，direction 是可选的，默认值为 to right，表示从左到右的渐变。color-stop 是颜色停靠点，可以是颜色值，也可以是百分比。

示例：

/* 从左上角到右下角的线性渐变 */
background-image: linear-gradient(to bottom right, red, yellow, green);

/* 从上到下的线性渐变 */
background-image: linear-gradient(to bottom, red, yellow, green);

/* 从左上角到右下角的线性渐变，颜色停靠点分别为红色（0%）、黄色（50%）和绿色（100%） */
background-image: linear-gradient(to bottom right, red 0%, yellow 50%, green 100%);

2. 径向渐变（radial-gradient）

径向渐变是从一个中心点向外逐渐过渡的渐变。基本语法如下：

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

其中，shape 是可选的，默认值为 ellipse，表示椭圆形渐变。size 是可选的，表示渐变的大小。position 是可选的，默认值为 center，表示渐变的中心位置。color-stop 是颜色停靠点，可以是颜色值，也可以是百分比。

示例：

/* 从中心到边缘的径向渐变 */
background-image: radial-gradient(circle, red, yellow, green);

/* 从左上角到右下角的径向渐变 */
background-image: radial-gradient(circle at top left, red, yellow, green);

/* 从中心到边缘的径向渐变，颜色停靠点分别为红色（0%）、黄色（50%）和绿色（100%） */
background-image: radial-gradient(circle, red 0%, yellow 50%, green 100%);

你可以根据自己的需求调整渐变的方向、颜色和位置。