linear-gradient 的 angle 参数不能绑定 css 变量做动画，因解析阶段 var() 未展开即判定函数无效，导致背景透明或失效；合法方式是变量包裹整个渐变声明或改用 conic-gradient + border-image。
不能直接用 linear-gradient 的 angle 参数绑定 CSS 变量做动画——浏览器会忽略它，背景变透明或卡死。 原因很实在：CSS 解析器在计算 linear-gradient() 时，要求第一个参数（方向）必须是静态值（如 135deg 或 to right），而 var(--angle) 是字符串占位符，未展开前整个函数就已判定为无效。
为什么 linear-gradient(var(--angle), ...) 一定失败
这不是兼容性问题，是 CSS 规范层面的限制。浏览器看到 linear-gradient(var(--angle), #f00, #0f0) 时，var() 还没被代入，语法树构建阶段就报错，退回到默认背景（通常是透明）。你不会收到错误提示，只会发现元素“没颜色”或“闪一下就消失”。
- ✅ 合法写法：
linear-gradient(135deg, #f00, #0f0)、linear-gradient(to bottom, #f00, #0f0) - ❌ 非法写法：
linear-gradient(var(--angle), #f00, #0f0)、linear-gradient(calc(var(--angle) + 90deg), ...) - 变量必须包裹整个渐变声明，例如：
--bg-gradient: linear-gradient(135deg, #f00, #0f0); background-image: var(--bg-gradient);
想用变量控制旋转？改用 conic-gradient + border-image
真正能靠变量驱动“环绕旋转”的是 conic-gradient，尤其适合流光边框类效果。它支持 from var(--rotate)，且现代浏览器（Chrome ≥ 110、Firefox ≥ 111、Safari ≥ 17.4）已稳定支持关键帧中更新该变量。
- 必须显式声明变量单位：
--rotate: 0deg;，漏掉deg会导致动画失效 - 必须用
border-image而非background：避免覆盖内容、圆角错位、响应式拉伸失真 - 基础结构要完整：
border: 4px solid transparent;+border-image: conic-gradient(from var(--rotate), ...) fill / 1 / 0 stretch; - 动画定义要作用在元素自身：
element { --rotate: 0deg; animation: spin 6s linear infinite; }
@property 不是万能解，对角度变量基本无用
@property 能让某些变量参与 transition 或 @keyframes 插值，但它只适用于数值型变量（number、length、angle），且前提是变量被用于可动画属性（如 transform、color）。它**无法复活 linear-gradient() 中被拒绝的 var(--angle)**。
- ✅ 可行：
@property --hue { syntax: "<number>", inherits: true, initial-value: 200; }</number>+background: hsl(var(--hue), 80%, 60%); - ❌ 无效：
@property --angle { syntax: "<angle>", ... }</angle>+linear-gradient(var(--angle), ...) - 别浪费时间给角度变量加
@property，它解决不了根本解析失败的问题
真正绕不开的细节是：你得接受「角度不能单独变量化」这个事实。要么用 conic-gradient + border-image 实现环绕感，要么用多关键帧 + 固定角度值模拟旋转——后者更兼容，前者更灵活，但两者都不能偷懒写 var(--angle) 进 linear-gradient 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
