CSS3 渐变（Gradients）

在 CSS3 中，我们可以使用渐变（gradients）来创建平滑过渡的颜色效果。渐变可以应用于背景、文本、边框等元素，让页面看起来更加美观和现代化。

线性渐变

线性渐变是指颜色从一个方向渐变到另一个方向。我们可以使用 linear-gradient() 函数来实现线性渐变效果。以下是一个简单的例子：

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

在上面的例子中，我们给 .gradient 类的元素应用了一个从红色渐变到蓝色的线性背景渐变效果。to right 表示渐变的方向是从左到右。

除了指定颜色之外，我们还可以指定渐变的起始点和终点，以及多个颜色的过渡方式。例如：

.gradient {
    background: linear-gradient(45deg, red, yellow, green);
}

在上面的例子中，我们给 .gradient 类的元素应用了一个从红色渐变到黄色再到绿色的线性背景渐变效果，并且渐变的方向是 45 度。

径向渐变

径向渐变是指颜色从一个中心点向四周辐射渐变。我们可以使用 radial-gradient() 函数来实现径向渐变效果。以下是一个简单的例子：

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

在上面的例子中，我们给 .gradient 类的元素应用了一个从红色渐变到蓝色的径向背景渐变效果。circle 表示渐变的形状是一个圆形。

除了指定颜色和形状之外，我们还可以指定渐变的起始点和终点，以及多个颜色的过渡方式。例如：

.gradient {
    background: radial-gradient(circle at 50% 50%, red, yellow, green);
}

在上面的例子中，我们给 .gradient 类的元素应用了一个从红色渐变到黄色再到绿色的径向背景渐变效果，并且圆心位于元素的中心。

以上就是 CSS3 渐变的基本用法，通过合理的应用渐变效果，可以让页面呈现出更加丰富多彩的视觉效果。