线性渐变

线性渐变沿一条直线从一种颜色过渡到另一种，用 linear-gradient() 生成，它返回的是一张「图片」，所以写在 background-image 上：

linear-gradient(to right, red, blue)：从左到右，红过渡到蓝。
方向可以是关键词（to top / to bottom right）、角度（45deg，0deg 指向上，顺时针增加）。
颜色停靠点：在颜色后加位置可精确控制过渡节奏，如 red 0%, red 50%, blue 50% 会在 50% 处形成硬边——两条纯色区拼接。

硬边技巧非常实用：两个颜色共用同一位置就得到锐利分界，配合重复或 multiple stops 可以画进度环、条纹背景、斑马线，完全不需要图片。

透明渐变（transparent 到某色）常用于图片上的遮罩、底部的文字渐隐，让文字压图依旧可读。

本节要点linear-gradient(方向, 颜色位置, ...)，方向支持关键词与角度；两色同位即硬边，可画条纹；transparent 渐变做图片遮罩是高频套路。

CSS

<style>
  .g1 {
    height: 50px;
    background: linear-gradient(to right, #39c5cf, #2667a0);
  }
  /* 条纹：硬边停靠点 */
  .g2 {
    height: 50px;
    background: repeating-linear-gradient(
      45deg,
      #ffe082 0, #ffe082 10px,
      #fff59d 10px, #fff59d 20px
    );
  }
  /* 图片遮罩：底部渐隐保文字可读 */
  .mask {
    height: 60px;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
  }
</style>
<div class="g1"></div>
<div class="g2"></div>
<div class="mask"></div>

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读