color-stop 是颜色与可选位置的组合，用于精确控制渐变节奏；只写颜色会导致浏览器自动均分位置，结果不可控。
color-stop 是什么，为什么不能只写颜色？
linear-gradient() 里的每个颜色项叫 color-stop，它不只是“一种颜色”，而是“颜色 + 可选位置”的组合。浏览器靠这个位置信息决定颜色从哪开始、在哪过渡、是否重叠——不写位置时，它会自动均分，但结果往往不符合预期。
- 只写
red, blue, green→ 浏览器默认为red 0%, blue 50%, green 100% - 写
red 20%, blue 20%, blue 60%, green 60%→ 实现红→蓝硬切、蓝块占40%、蓝→绿硬切 - 漏掉位置又用多色（比如
red, yellow 40%, blue）→ 中间黄色被锚定，但红色和蓝色的位置由浏览器推算（红=0%，蓝=100%），易出偏差
多颜色节点的位置怎么配才不翻车？
三个及以上颜色时，位置不是“可有可无”的装饰，而是控制节奏的核心参数。常见错误是以为写了百分比就万事大吉，其实相邻两个 color-stop 的位置决定了该段渐变的长度和速率。
- 必须保证位置数值单调递增：不允许
red 50%, blue 30% - 允许重复值实现硬边：
orange 30%, orange 30%, purple 30%等价于orange 30%, purple 30%，但更清晰 - 首尾不写位置也行，但建议显式写
red 0%, ... , blue 100%，避免嵌套规则或 CSS 预处理器插值干扰 - 用像素值（如
red 0px, blue 100px）可以脱离容器尺寸做绝对控制，适合固定高度条纹等场景
rgba() 和 transparent 怎么参与 color-stop？
透明度不是加在 background 上，而是直接融入每个 color-stop —— 这样才能让渐变本身带透明过渡，而不是整个背景半透。
background: linear-gradient( to right, rgba(255, 0, 0, 0.8) 0%, transparent 50%, rgba(0, 0, 255, 0.8) 100% );
-
transparent是关键字，等价于rgba(0,0,0,0)，但更简洁、语义明确 - 混用
rgb()和hex没问题，但别混用hsl()和带 alpha 的rgba()做过渡——色域和插值模型不同，可能产生意外灰阶 - 所有颜色必须同属一个色彩空间（推荐统一用
rgb()或hsl()），否则浏览器插值逻辑不一致，尤其在深色模式下容易发灰或跳变
浏览器怎么解析没写位置的多色序列？
这是最容易被忽略的隐式规则：当多个 color-stop 都没写位置时，浏览器不会简单按顺序 0%→100% 平分，而是先固定首尾，再把中间色均匀塞进剩余区间。
立即学习“前端免费学习笔记（深入）”；
-
linear-gradient(red, yellow, blue)→red 0%, yellow 50%, blue 100% -
linear-gradient(red, orange, yellow, green, blue)→red 0%, orange 25%, yellow 50%, green 75%, blue 100% - 但一旦其中某个写了位置（如
yellow 30%），其余未声明位置的颜色就不再均分，而是由浏览器按最小约束推导——此时行为不可控，应全部显式声明
真正可控的多色渐变，永远从「每个 color-stop 都带位置」开始；所谓“省略”只是偷懒，不是简写。
