color hint 是两个色标间插入的纯百分比值，用于偏移插值中点而非定义颜色；必须位于相邻色标之间、介于二者百分比范围内，且径向渐变不支持。
“Color hint”不是独立语法，而是两个色标之间插入的百分比值，用来偏移插值中点——它不定义颜色，只调整过渡快慢；误以为它是“中间色”的写法，会导致渐变行为失控。
color hint 的真实语法和位置限制
所谓 color hint，就是在两个相邻 color-stop 之间插入一个纯百分比（无颜色），例如：linear-gradient(to right, red 25%, 40%, blue 75%)。这里的 40% 就是 hint，它必须紧挨在两个色标之间，且不能单独出现、不能开头或结尾。
常见错误包括：
- 把
red 25%, #ff0, blue 75%中的#ff0当作 hint（实际是隐式色标，位置被强制等分） - 写成
red 25%, 40%, 60%, blue 75%（多个 hint 连续出现，浏览器忽略除第一个外的所有） - 在径向渐变里滥用 hint（
radial-gradient不支持 hint 语法）
hint 如何改变插值中点，而不是添加颜色
没有 hint 时，red 25%, blue 75% 的插值中点默认落在区间中点：即整个渐变的 50% 处（因为 (25% + 75%) / 2 = 50%）。加了 hint 后，中点被重定向到该百分比位置——但仅限于这两个色标之间的过渡段。
也就是说：red 25%, 40%, blue 75% 表示：从 25% 到 75% 这段过渡的“视觉中点”被拉到 40%，红色会更快淡出，蓝色更早主导。这不是新增一个颜色，也不影响其他区段。
关键约束：
- hint 值必须介于前后两个色标的百分比之间（如 25% 和 75% 之间，就不能写 10% 或 90%）
- hint 不接受颜色函数（不能写
40% blue或hsl(0 0% 0%)） - hint 对性能无影响，但过度使用会让 CSS 难以维护
为什么用 hint 而不用双色标硬切
双色标（如 red 37%, yellow 37%）实现的是颜色“硬切”，适合条纹、分界线；而 hint 实现的是“非线性过渡”，适合模拟光照衰减、阴影软边、按钮悬停的加速感等。
二者不可互换：
- 想让红色在 37% 处彻底消失？用双色标
- 想让红→蓝过渡在 40% 就完成 80% 的变化？用 hint
- hint 无法控制起始/结束色的位置，只调节中间过渡节奏
background-size 和 background-position 会干扰 hint 效果
即使你写了 red 25%, 40%, blue 75%，如果容器设置了 background-size: 150% 100%，那么所有百分比都会按比例缩放：原本 40% 的 hint 实际渲染在容器宽度的 40% × 1.5 = 60% 处。
这意味着：
- hint 的数值意义依赖于
background-size的当前值 - 用
background-position平移背景时，hint 区段也会同步位移，可能切出画面外 - 响应式场景下，若
background-size用cover或contain，hint 的实际位置完全不可预测
真正需要精确控制中点位置时，优先固定 background-size 为具体值（如 200px 100%），再配 hint，否则数值只是示意。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
