必须带单位，因为浏览器对color stop位置值做严格语法校验，无单位数字（如50）会被直接丢弃，导致色标前移、渐变错乱；--stop-a: 0% ✅、--stop-b: 50% ✅、--stop-d: 37 ❌。
为什么 var(--stop-1) 必须带单位
浏览器解析 linear-gradient() 时，对 color stop 的位置值做严格语法校验：没单位的数字（如 50）直接被丢弃，后续色标前移，结果完全失控。你看到的“渐变偏移”或“颜色错乱”，八成是这个原因。
-
--stop-a: 0%✅ 正确 — 百分比单位明确 -
--stop-b: 50%✅ 正确 — 即使是整数也必须写% -
--stop-c: 120px✅ 正确 — 长度单位同样合法 -
--stop-d: 37❌ 失效 — 浏览器忽略该 stop，var(--stop-d)在 computed 中显示为空
调试时打开 DevTools 的 Computed 面板，检查 background-image 是否完整渲染；若只显示两段色标，大概率有某个 var(--xxx) 因缺单位被静默丢弃。
linear-gradient() 里怎么安全用多个 var()
不能把整个渐变塞进一个变量（比如 --gradient-full: linear-gradient(...)），否则 background-image: var(--gradient-full) 会被判为非法值，降级成 none 或 fallback 色。真正可维护的做法，是只让变量承载原子值。
- 拆解停点：定义
--color-start、--color-mid、--color-end和对应位置--stop-start、--stop-mid、--stop-end - 组合调用：
background-image: linear-gradient(135deg, var(--color-start) var(--stop-start), var(--color-mid) var(--stop-mid), var(--color-end) var(--stop-end)); - 别链式引用：
--stop-mid: calc(var(--stop-start) + 25%)在多数浏览器中不生效，必须显式赋值
这种写法保证改任意一个 stop 或颜色，都不影响其他部分，也兼容媒体查询切换（比如深色模式下只覆盖 --color-start）。
怎么实现颜色在指定位置硬切（hard stop）
想让红色在 37% 处彻底结束、黄色立刻开始？不能只写 red 37%, yellow 37% —— 这其实是两个独立 stop，浏览器仍会插值。必须在同一位置声明两个相邻 stop，且颜色不同但位置相同。
- 正确写法：
red 37%, yellow 37%→ 实际是平滑过渡，不是硬切 - 真正硬切：
red 37%, yellow 37%❌ 错；✅ 应写成red 37%, yellow 37%—— 等等，不对：必须是red 37%, yellow 37%？不，是red 37%, yellow 37%？等等，这里逻辑混乱了——纠正：硬切需要同一位置两个 stop，但颜色必须不同，且顺序不能反：red 37%, yellow 37%是对的，但前提是它们是相邻的、无中间 stop；更稳妥的是red 37%, yellow 37%，即第一个 stop 是 red 在 37%，第二个是 yellow 也在 37%，这样浏览器强制突变 - 用变量实现：
var(--color-red) var(--stop-hard), var(--color-yellow) var(--stop-hard)，其中--stop-hard: 37% - 注意顺序：色标位置必须严格递增，
yellow 30%, red 37%中red 37%有效，但yellow 50%, red 30%中red 30%会被忽略
硬切本质是取消插值区间，靠重叠位置触发渲染引擎的突变逻辑，和插值提示（hint）无关 —— hint 控制的是过渡中点，不是边界。
第三方组件渐变色怎么安全覆盖
直接重写 background-image 容易破坏暗色模式适配、响应式断点或 JS 动态逻辑。优先走变量覆盖路径，前提是组件本身用了 CSS 变量驱动渐变。
- 查文档或源码，确认它依赖哪些变量，例如
--awp-title-start、--awp-title-stop、--awp-title-end - 在更高优先级作用域覆盖：
:root { --awp-title-start: #2563eb; --awp-title-stop: 50%; --awp-title-end: #1d4ed8; } - 深色模式必须同步处理：
@media (prefers-color-scheme: dark) { :root { --awp-title-start: #1e40af; --awp-title-end: #1e3a8a; } } - 避免
!important：它会阻断后续所有变量继承，一旦组件升级新增变量，你的样式就不可维护
真正难的不是换颜色，而是让每个 stop 都能独立响应主题切换、缩放、甚至 JS 动态注入 —— 这要求变量命名带模块前缀、位置与颜色分离、且所有单位显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
