渐变css

作者：昂首向前走，发布日期:2025-02-25 浏览:143

/* 渐变背景色示例代码 */

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}

/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow);
}

/* 角度渐变 */
.angle-gradient {
  background: linear-gradient(135deg, red, yellow);
}

/* 多颜色渐变 */
.multi-color-gradient {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

解释说明：

线性渐变 (linear-gradient)：从左到右（或指定方向）的颜色渐变。
径向渐变 (radial-gradient)：从中心向外扩散的颜色渐变，形状可以是圆形或椭圆形。
角度渐变：通过指定角度来控制渐变的方向。
多颜色渐变：可以在渐变中使用多个颜色，形成更复杂的视觉效果。

上一篇：css 隐藏元素

下一篇：css 行距