css 渐变背景

作者：菠蘿。d海发布日期:2025-04-07 浏览:30

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

/* 线性渐变 */
body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* 解释说明：
- `linear-gradient` 函数用于创建一个线性渐变的背景。
- `to right` 表示渐变的方向是从左到右。
- `#ff7e5f` 和 `#feb47b` 是两个颜色值，表示从左边的颜色逐渐过渡到右边的颜色。
*/

/* 径向渐变 */
body {
  background: radial-gradient(circle, #33ccff, #ff99cc);
}

/* 解释说明：
- `radial-gradient` 函数用于创建一个径向渐变的背景。
- `circle` 表示渐变的形状为圆形。
- `#33ccff` 和 `#ff99cc` 是两个颜色值，表示从中心的颜色逐渐向外扩展过渡。
*/

/* 角度渐变 */
body {
  background: linear-gradient(135deg, #ff6f61, #fff176, #2196f3);
}

/* 解释说明：
- `135deg` 表示渐变的角度为135度。
- `#ff6f61`, `#fff176`, `#2196f3` 是三个颜色值，表示从第一个颜色逐渐过渡到第二个颜色，再到第三个颜色。
*/

上一篇：css显示省略号

下一篇：css 文字上下居中