第七章 · 7.2 节

渐变

渐变本质上是一种特殊的图像值，可以用在任何接受 background-image 的地方。CSS 提供三种渐变函数——线性、径向、锥形，分别对应"沿一条直线过渡""从一点向外扩散""围绕一点旋转过渡"三种视觉效果。

linear-gradient：线性渐变

.hero {
  background: linear-gradient(135deg, #8a5a2e, #3f5d54);
}

角度或关键字（to right、to bottom left）决定渐变方向；0deg 指向正上方，角度顺时针增加。

radial-gradient：径向渐变

.spotlight {
  background: radial-gradient(circle at 30% 30%, #d3985a, #26233a 70%);
}

at 30% 30% 决定圆心位置；不指定形状时默认按容器比例呈椭圆，显式写 circle 则强制正圆。

conic-gradient：锥形渐变

颜色围绕中心点旋转过渡，是绘制饼图、色相环、加载进度环最直接的方式。

.pie {
  background: conic-gradient(#8a5a2e 0 65%, #e7e8e1 0);
  border-radius: 50%;
}

色标位置与硬边渐变

每个颜色后面可以跟一个位置百分比。当相邻两个色标使用相同的位置值时，过渡会瞬间完成，形成清晰的"硬边"，常用来模拟条纹或分段进度条。

.stripes {
  background: linear-gradient(90deg,
    #8a5a2e 0 25%,
    #3f5d54 25% 50%,
    #8a5a2e 50% 75%,
    #3f5d54 75% 100%);
}

叠加多层渐变

background 支持用逗号叠加多个背景图层，渐变与真实图片可以混合使用——常见做法是在图片上叠一层半透明渐变遮罩，保证文字在任意背景图上都清晰可读：

.card-cover {
  background:
    linear-gradient(to top, rgba(0,0,0,.7), transparent 60%),
    url("cover.jpg");
  background-size: cover;
}

文字渐变

把渐变"裁剪"进文字形状内，是标题类视觉效果中常见的技巧，依赖 background-clip: text 与透明文字色配合：

.gradient-text {
  background: linear-gradient(90deg, #8a5a2e, #3f5d54);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}