CSS3怎样实现渐变背景

在 CSS3 中，可以使用 linear-gradient()（线性渐变） 和 radial-gradient()（径向渐变） 来实现渐变背景。下面给你常见用法和示例。

一、线性渐变（linear-gradient）

1️⃣ 基本语法

background: linear-gradient(direction, color1, color2, ...);

2️⃣ 从上到下（默认）

background: linear-gradient(red, blue);

3️⃣ 从左到右

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

4️⃣ 对角线

background: linear-gradient(to bottom right, red, yellow, blue);

5️⃣ 使用角度

background: linear-gradient(45deg, red, blue);

6️⃣ 控制颜色位置

background: linear-gradient(to right, red 0%, green 50%, blue 100%);

二、径向渐变（radial-gradient）

1️⃣ 基本语法

background: radial-gradient(shape size at position, color1, color2);

2️⃣ 默认圆形渐变

background: radial-gradient(circle, red, yellow, blue);

3️⃣ 指定中心位置

background: radial-gradient(circle at center, red, blue);

background: radial-gradient(circle at top left, red, blue);

4️⃣ 椭圆渐变

background: radial-gradient(ellipse, red, blue);

三、重复渐变

1️⃣ 重复线性渐变

background: repeating-linear-gradient(
  45deg,
  red 0px,
  red 10px,
  blue 10px,
  blue 20px
);

2️⃣ 重复径向渐变

background: repeating-radial-gradient(
  circle,
  red 0px,
  red 10px,
  blue 10px,
  blue 20px
);

四、完整示例（常用写法）

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

HTML：

<div class="box"></div>

五、兼容写法（老浏览器）

background: -webkit-linear-gradient(top, red, blue);
background:    -moz-linear-gradient(top, red, blue);
background:         linear-gradient(to bottom, red, blue);

六、常见应用场景

• 按钮渐变背景
• 页面背景
• 卡片高光效果
• 加载动画（配合动画）

如果你需要 某个具体效果（如渐变按钮、动画渐变、微信小程序渐变），可以告诉我，我可以直接给你写完整代码。