CSS渐变中颜色停止点“偏移”是因为色标位置基于渐变画布（受background-size影响）而非元素本身，且隐式色标无精确控制权；需用双色标同位置实现硬切，显式标注百分比避免等距分配。
渐变颜色停止点为什么总“偏移”？
CSS 渐变中用 50% 指定颜色停止位置，并不总是停在视觉正中间——因为浏览器会按色标（color stop）之间的**线性插值区间**计算，而非整个渐变容器。当你写 linear-gradient(to right, red 0%, blue 50%, green 100%)，blue 50% 确实落在 50% 处；但若漏掉中间点，比如 red 0%, green 100%，浏览器会自动补一个隐式中间色（通常是两色平均），而这个“补出来的色”没有明确位置控制权。
用双色标 + 百分比锁定精确中止位置
要让某种颜色严格终止于某个像素位置（比如让红色在 37% 处彻底结束、之后立刻切到黄色），必须为**同一位置声明两个相邻色标**，且第二个色标的颜色与下一个区段起始色一致：
linear-gradient(to right, red 0%, red 37%, yellow 37%, yellow 100%)- 关键不是“写了两次 37%”，而是
red 37%和yellow 37%在同一位置形成硬切（hard stop） - 如果只写
red 0%, yellow 37%, yellow 100%，37% 只是黄色开始的位置，红色实际会从 0% 平滑过渡到 37%，并非“中止” - 百分比值支持小数，如
37.2%，精度足够应对高 DPI 或精细布局需求
color hint（颜色暗示）不是独立语法，而是省略色标的副作用
CSS 中根本不存在叫 “color hint” 的标准概念。所谓“hint”，其实是开发者对**未显式指定位置的中间色标**的误称。例如：
linear-gradient(to right, #f00, #ff0, #0f0)
这段代码里只有三色、无任何百分比，浏览器会把它们等距分配：等效于 #f00 0%, #ff0 50%, #0f0 100%。这里的 #ff0 就是被“暗示”在 50% 的位置——但它不可控、不可微调，且一旦加了任意一个带百分比的色标，其余未标注位置的色标就不再等距，规则变为“按出现顺序线性分配剩余空间”。
- 加一个
#f00 0%, #ff0, #0f0 100%→#ff0被分配到 50% - 加一个
#f00 0%, #ff0 20%, #0f0 100%→#ff0固定在 20%，#0f0在 100%，中间空白由浏览器插值填充 - 想让中间色出现在非等分点？必须显式写百分比，别依赖“hint”
渐变中止位置受 background-size 和 background-position 实际影响
即使你用百分比精确定义了色标位置，最终视觉中止点还取决于容器背景的渲染范围：
-
background-size: 200% 100%会让整个渐变拉伸为容器宽的 2 倍，此时red 37%实际出现在容器宽度的37% × 2 = 74%处 -
background-position: -50px 0会横向偏移渐变起点，使所有百分比位置同步左移 - 调试时建议先固定
background-size: 100% 100%和background-position: 0 0，确认色标行为，再叠加缩放/定位 - 用
background: linear-gradient(...) / 100% 100% no-repeat;显式重置尺寸，避免继承或重置干扰
真正难的不是写对百分比，而是意识到色标位置永远相对于当前 background-size 下的渐变画布，而不是元素本身。改一个 background-size，所有“精确控制”都得重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
