linear-gradient() 的方向参数必须是静态值，var(--angle) 在解析阶段未展开，导致语法错误、背景透明；唯一合法方式是将整个渐变字符串存入 CSS 变量后通过 background-image 引用。
不能直接用 var(--angle) 当 linear-gradient() 的第一个参数——浏览器解析阶段就报错，背景变透明或消失，不是兼容性问题，是语法层面不合法。
为什么 linear-gradient(var(--angle), ...) 一定失败
浏览器在构建 CSS 语法树时，要求 linear-gradient() 的方向参数必须是静态值（如 45deg 或 to right），而 var(--angle) 是字符串占位符，尚未展开。此时整个函数被判为无效，退回到默认背景（通常是透明）。你不会看到控制台报错，只会发现元素“没颜色”或“闪一下就没了”。
-
linear-gradient(135deg, #f00, #0f0)✅ 合法 -
linear-gradient(var(--angle), #f00, #0f0)❌ 解析失败 -
linear-gradient(calc(var(--angle) + 90deg), ...)❌ 同样不被接受
合法方式：把整个渐变声明存进变量
唯一可靠的做法是让 CSS 变量存储完整的 linear-gradient() 字符串，再通过 background-image: var(--bg-gradient) 引入。
- 定义变量：
--bg-gradient: linear-gradient(135deg, #ff6b6b, #4ecdc4); - 使用：
background-image: var(--bg-gradient); - 切换时只需更新变量值，比如：
--bg-gradient: linear-gradient(to bottom, #5a67d8, #38a169); - 避免在 JS 中用
element.style.background = '...'覆盖，会清掉变量和transition
想让角度“动起来”？改用 conic-gradient + border-image
真正支持变量驱动旋转的是 conic-gradient，它允许 from var(--rotate)，且现代浏览器（Chrome ≥ 110、Firefox ≥ 111、Safari ≥ 17.4）已稳定支持关键帧中更新该变量。
-
border-image: conic-gradient(from var(--rotate), #f00, #0f0) 1;可实现流光边框类环绕效果 -
@property --rotate { syntax: "<angle>", inherits: false, initial-value: 0deg; }</angle>配合transition才能插值 -
@property对linear-gradient的角度变量完全无效——别浪费时间加它
颜色过渡要平滑？用 hsl() + @property 控制色相/亮度
如果目标是渐变色本身“流动”，而不是角度旋转，那就得绕过 background-image 动画限制：把颜色抽成变量，用 hsl() 或 rgba() 构建渐变，再靠 @property 声明可动画类型。
- 必须声明：
@property --hue { syntax: "<number>", inherits: true, initial-value: 200; }</number> - 然后写：
background: linear-gradient(45deg, hsl(var(--hue), 80%, 60%), hsl(calc(var(--hue) + 60), 80%, 60%)); - 只动画
--hue，浏览器才能做数值插值；transition: --hue 0.4s ease - 注意：Chrome 110+ / Firefox 111+ 才支持，旧版 Safari 会降级为跳变
最易被忽略的点是：角度无法单独变量化的事实绕不开。要么接受固定角度多关键帧模拟，要么换 conic-gradient，要么用 background-position 移动大尺寸渐变图——选哪个取决于你要的视觉效果、兼容性底线和性能敏感度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
