CSS渐变（Gradient）详解

渐变是CSS中用于创建平滑过渡的背景图像的技术，它允许你在两个或多个颜色之间生成渐变的视觉效果，而无需使用图片。CSS渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient），以及较少用的圆锥渐变（conic-gradient）。下面我们逐步深入讲解。

1. 渐变的基本概念

渐变是通过background-image属性（或background）定义的，例如：

div {
  background-image: linear-gradient(red, blue);
}

这段代码会创建一个从红色到蓝色的垂直渐变（默认方向从上到下）。

2. 线性渐变（linear-gradient）

语法结构：

linear-gradient([方向], 颜色1 [位置], 颜色2 [位置], ...);

• 方向：可选参数，可以是角度（如45deg）或关键词（如to top right）。默认值为to bottom（从上到下）。
• 颜色与位置：颜色值后可以跟百分比或长度值，表示颜色开始过渡的位置。

示例分析：

（1）默认方向渐变

.box {
  background-image: linear-gradient(red, yellow);
}

效果：从上到下，红色渐变为黄色。

（2）指定方向

.box {
  background-image: linear-gradient(to right, red, yellow);
}

效果：从左到右，红色渐变为黄色。

（3）多颜色与位置控制

.box {
  background-image: linear-gradient(to bottom, red 0%, yellow 50%, blue 100%);
}

效果：

• 从顶部开始为红色，到50%高度时变为黄色，最后到底部变为蓝色。
• 如果省略位置，浏览器会自动平均分配颜色。

（4）使用角度

.box {
  background-image: linear-gradient(45deg, red, blue);
}

效果：沿45度角（从左下到右上）渐变。

3. 径向渐变（radial-gradient）

径向渐变从中心点向外扩散，语法如下：

radial-gradient([形状] [大小] at [中心点], 颜色1 [位置], 颜色2 [位置], ...);

• 形状：ellipse（椭圆，默认）或circle（圆形）。
• 大小：如farthest-corner（到最远角落，默认）、closest-side（到最近边）等。
• 中心点：如at center（默认）、at top left等。

示例分析：

（1）默认径向渐变

.box {
  background-image: radial-gradient(red, yellow);
}

效果：从中心向外，红色渐变为黄色（椭圆形状）。

（2）指定形状与大小

.box {
  background-image: radial-gradient(circle closest-side, red, blue);
}

效果：圆形渐变，颜色从中心扩展到最近边。

（3）明确中心点

.box {
  background-image: radial-gradient(at top right, red, yellow);
}

效果：从右上角开始向外渐变。

4. 渐变的高级技巧

（1）硬边渐变（颜色条带）

通过让相邻颜色位置相同，可以创建突然变化的色块：

.box {
  background-image: linear-gradient(to right, red 50%, blue 50%);
}

效果：左半部分红色，右半部分蓝色，中间无过渡。

（2）重复渐变

• repeating-linear-gradient：重复线性渐变图案。

.box {
  background-image: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

效果：红蓝相间的斜条纹。

• repeating-radial-gradient：重复径向渐变。

（3）渐变与背景混合

渐变可与其他背景属性结合使用，如：

.box {
  background: 
    linear-gradient(rgba(255,0,0,0.5), transparent),
    url("image.jpg");
}

效果：半透明红色渐变叠加在图片上。

5. 浏览器兼容性与注意事项

• 渐变需注意前缀兼容（如旧版Webkit浏览器需加-webkit-前缀）。
• 渐变是背景图像，因此不能用于background-color属性。
• 可通过在线工具（如CSS Gradient Generator）可视化调试渐变。

通过掌握渐变的参数组合，你可以创建复杂的背景效果，减少图片资源的使用，提升页面加载性能。