css3如何制作渐变背景

在 CSS3 中，制作渐变背景主要使用 background-image 或 background 属性，配合 线性渐变（linear-gradient） 或 径向渐变（radial-gradient） 等函数来实现。

一、线性渐变（linear-gradient）

沿一条直线方向渐变。

基本语法

background: linear-gradient(方向, 颜色1, 颜色2, ...);

示例 1：从上到下（默认）

.div1 {
  width: 300px;
  height: 200px;
  background: linear-gradient(red, blue);
}

示例 2：从左到右

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

示例 3：指定角度

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

示例 4：指定颜色位置

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

二、径向渐变（radial-gradient）

从中心点向外扩散渐变。

基本语法

background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2);

示例 1：圆形渐变（默认）

background: radial-gradient(red, blue);

示例 2：指定中心位置

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

示例 3：椭圆渐变

background: radial-gradient(ellipse at left top, red, yellow, green);

三、重复渐变

重复线性渐变

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

重复径向渐变

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

四、渐变背景常见技巧

1️⃣ 背景固定不随内容滚动

background-attachment: fixed;

2️⃣ 给文字加渐变（配合背景裁剪）

.gradient-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  color: transparent;
}

3️⃣ 全屏渐变背景

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

五、浏览器兼容性提示

现代浏览器均支持 CSS3 渐变，旧版 Safari / Chrome 可使用前缀：

background: -webkit-linear-gradient(red, blue);

如果你有具体场景（如按钮、卡片、动画渐变、移动端适配），可以告诉我，我可以给你更针对性的示例。