不能直接用CSS变量存整个linear-gradient()来动态调整颜色停点，必须将颜色停点（如--color-start、--color-end）拆为独立变量，在linear-gradient()中用var()调用；否则改色需重写整条声明，且作用域未覆盖或浏览器不支持时会降级为透明或纯色背景。
不能直接用 CSS 变量存整个 linear-gradient() 并指望它“动态调整颜色停点”，但可以安全、可控地让渐变随变量实时变化——关键在于只变量化颜色值，不变量化函数结构。
为什么 var(--gradient) 有时不生效
常见错误是把整条渐变声明塞进变量里，比如：--gradient: linear-gradient(45deg, #ff6b6b, #4ecdc4);。这看似方便，但一旦想单独改起始色，就得重写整条声明；更严重的是，如果变量作用域没覆盖到目标元素（比如在 :root 定义却在局部组件里用），或者浏览器不支持 background-image 过渡（如旧版 Safari），就会 fallback 到透明或纯色背景。
- 检查 computed style 中
background-image是否为none或空值，大概率是变量未注入或被简写属性覆盖 - 避免在 JS 中用
element.style.background = '...'赋值，它会清空所有 background 相关声明，包括你设的var() - 确保变量名拼写一致，CSS 变量区分大小写，
--Color-Start和--color-start是两个变量
正确拆解：只变量化颜色停点，不变量化函数
把每个颜色停点抽成独立变量，再在 linear-gradient() 里用 var() 引入。这样改一个色，不影响方向、缓动或其它停点。
- 定义：
--color-start: #ff6b6b; --color-end: #4ecdc4; - 使用：
background-image: linear-gradient(135deg, var(--color-start), var(--color-end)); - 支持过渡：
transition: background-image 0.4s ease;（Safari 16.4+ 及 Chrome/Firefox 稳定支持） - 注意：颜色值必须是合法颜色语法（
#rrggbb、hsl()、rgb()），不能是red这类关键词，否则部分浏览器跳过过渡
JS 中更新变量触发渐变切换的实操要点
用 JS 改变量本身没问题，但顺序和方式影响动画是否流畅。
- 批量更新多个变量时，推荐用
element.style.cssText += '--color-start: #00f; --color-end: #0ff;';，避免多次 layout 触发 - 不要在
requestAnimationFrame或滚动回调里高频调用style.setProperty()，CSS 变量不是瓶颈，但高频重算 + 过渡会卡顿 - 监听切换完成？用
transitionend事件，并严格过滤：if (event.propertyName === 'background-image') - 如果只是主题切换，优先用 class 切换（如
.theme-dark）配合 CSS 层叠，比 JS 操作变量更轻量、更可预测
真正容易被忽略的点是：渐变动画依赖浏览器对 background-image 的差分重绘能力，而这个能力在移动端或低端设备上仍不稳定；如果你发现动画卡顿或闪一下，大概率不是代码写错，而是该设备不支持平滑过渡——这时退回到伪元素叠加或 background-position 位移法更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
