css变量不能只存角度或颜色，必须将整个linear-gradient()声明作为字符串存储，因为var(--angle)在语法解析阶段未被替换，导致linear-gradient(var(--angle), red, blue)被判定为无效而退化为透明背景。
CSS变量不能只存角度或颜色，必须把整个 linear-gradient() 声明当字符串存进去，否则会解析失败。
为什么 var(--angle) 不能直接塞进 linear-gradient()
浏览器在解析 background-image: linear-gradient(var(--angle), red, blue) 时，var(--angle) 还没被替换，整个函数就被判为语法无效，最终退化成透明背景。这不是浏览器兼容问题，而是 CSS 自定义属性的字符串替换机制决定的——它发生在样式计算之后，而 linear-gradient() 的语法校验早在那之前就完成了。
-
linear-gradient(135deg, red, blue)✅ 合法 -
linear-gradient(var(--angle), red, blue)❌ 解析失败 -
background-image: var(--bg-gradient)✅ 安全，变量值是完整有效声明
怎么用 CSS 变量存整段渐变声明
把完整的 linear-gradient() 函数赋给一个自定义属性，后续只需更新该变量值即可切换效果：
body {
--bg-gradient: linear-gradient(135deg, #ff6b6b, #4ecdc4);
background-image: var(--bg-gradient);
}
再配合属性选择器动态切换：
:root[data-theme="dark"] {
--bg-gradient: linear-gradient(to bottom, #2d3748, #4a5568);
}
:root[data-theme="sunrise"] {
--bg-gradient: linear-gradient(90deg, #ff9a9e, #fad0c4);
}
- 变量名建议带语义，比如
--header-bg、--card-gradient，避免全用--gradient - 多色渐变也照常写，比如
linear-gradient(to right, red, orange, yellow, green) - 支持带位置的颜色停靠点：
linear-gradient(to bottom, #fff 0%, rgba(0,0,0,0.1) 100%)
动态切换时要注意重绘开销
频繁修改 --bg-gradient 会触发整个元素的 repaint，尤其在滚动容器或动画中容易卡顿。不是所有场景都适合实时响应。
- 如果只是主题切换，用
data-属性 + class 切换更轻量 - 避免在
@keyframes中逐帧更新渐变变量（浏览器不会优化） - 用
background-size: cover或background-attachment: fixed时更要小心，重绘范围可能扩大
真正麻烦的是组合多个渐变或叠加透明层时，变量值会变得又长又难维护——这时候不如拆成多个变量拼接，但得用 JS 注入，纯 CSS 没法做字符串拼接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
