css 背景色渐变

作者：古枕清风发布日期:2025-03-11 浏览:245

/* 线性渐变背景色示例 */
body {
  /* 渐变从顶部到底部，颜色从蓝色过渡到红色 */
  background: linear-gradient(to bottom, blue, red);
}

/* 径向渐变背景色示例 */
div {
  /* 渐变从中心向外扩散，颜色从白色过渡到黑色 */
  background: radial-gradient(circle, white, black);
}

解释说明：

线性渐变 (linear-gradient):
- to bottom 表示渐变方向是从上到下。
- blue 和 red 是渐变的起始和结束颜色，浏览器会自动在这两种颜色之间进行平滑过渡。
径向渐变 (radial-gradient):
- circle 表示渐变形状为圆形。
- white 和 black 是渐变的起始和结束颜色，渐变效果是从中心向外扩散。

希望这个示例对你有帮助！

上一篇：css文字自动换行

下一篇：css类选择器