浏览器隐式插入色标会导致渐变过渡不可控：0%、50%、100% 的均分逻辑在尺寸或 background-size 变化时引发像素漂移，造成模糊；无显式 stop 则无法定义插值节奏、硬切需双 stop 同位置且单位必须明确。
颜色停止点不显式声明时浏览器会自动补位
当你只写 linear-gradient(to right, red, blue)，浏览器会在 0%、50%、100% 三个位置隐式插入色标。但这个“50%”只是均分逻辑的结果，不是你设计的视觉中点——尤其当元素尺寸变化或 background-size 被修改时，渐变画布缩放，色标实际像素位置就漂移了，导致过渡带忽宽忽窄，看起来“模糊”或“发虚”。
隐式色标无法控制插值节奏
隐式分配不支持插值提示（hint），也没法微调某一段过渡的快慢。比如你想让红到黄在前 30% 就完成，剩下 70% 是黄到蓝的缓慢过渡，没显式 stop 就做不到。常见表现是：本该锐利的界面分割线变毛边，或者按钮悬停渐变出现意外的灰带。
-
red, yellow, blue→ 浏览器按 0%、50%、100% 插入，中间段强制线性均分 -
red 0%, yellow 30%, blue 100%→ 过渡节奏完全由你定义，30% 处是黄的峰值，前后插值区间明确
单位缺失会让整个渐变失效
用 CSS 变量控制 stop 时，--stop-mid: 50 是无效的——浏览器直接丢弃这个值，后续色标前移，结果只剩两段色标，过渡变成突兀硬切或完全错位。必须写成 --stop-mid: 50% 或 --stop-mid: 120px。
调试时打开 DevTools 的 Computed 面板，检查 background-image 计算值：如果只显示两个 color stop，八成是某个 var(--xxx) 因缺单位被静默过滤了。
硬切（hard stop）必须靠双 stop 同位置实现
想在 37% 处让红色立刻切到黄色？只写 red 37%, yellow 37% 不行——浏览器仍会在这两个 stop 之间做插值，哪怕位置相同。真正生效的是相邻两个不同颜色、同一位置的 stop：
linear-gradient(90deg, red 37%, yellow 37%, yellow 37%, blue 100%)
注意中间重复的 yellow 37%：第一个 yellow 37% 是 red 的结束，第二个是 yellow 的起点，浏览器识别为“无过渡区间”，才形成硬边。漏掉任一，就退回模糊渐变。
位置精度依赖单位严谨性，而插值节奏取决于 stop 间距——这两点一旦松动，渐变就从“可控表达”退化成“概率渲染”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
