css3背景与渐变

CSS3 提供了线性渐变和径向渐变两种背景渐变效果。

线性渐变（Linear Gradients）：

/* 从上到下的渐变 */
.gradient-background {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 从左到右的渐变 */
.gradient-background {
  background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}
 
/* 自定义角度的渐变 */
.gradient-background {
  background: linear-gradient(45deg, #33ccff 0%, #ff99cc 100%);
}

径向渐变（Radial Gradients）：

/* 圆形渐变 */
.gradient-background {
  background: radial-gradient(circle, #33ccff 0%, #ff99cc 100%);
}
 
/* 椭圆形渐变 */
.gradient-background {
  background: radial-gradient(ellipse, #33ccff 0%, #ff99cc 100%);
}
 
/* 自定义形状和尺寸的渐变 */
.gradient-background {
  background: radial-gradient(circle at center, #33ccff 0%, #ff99cc 100%);
}

这些是使用 CSS3 背景渐变的基本示例。您可以根据需要调整颜色和方向。