linear-gradient(var(--angle), ...) 失效是因为CSS解析器在构建语法树阶段要求方向参数必须是静态值，而var(--angle)尚未展开，导致函数被判定无效并回退为透明背景；这是规范限制，非兼容性问题。
为什么直接用 linear-gradient(var(--angle), ...) 会失效
浏览器在解析 linear-gradient() 时，要求方向参数必须是静态值（如 45deg 或 to right），而 var(--angle) 在语法树构建阶段尚未展开，导致整个函数被判定为无效。结果不是报错，而是背景回退为透明——你看到的是“突然消失”或“闪一下”，根本不会动。
这不是兼容性问题，是 CSS 规范层面的硬性限制。哪怕加了 @property 注册，也无法绕过这个解析阶段的校验。
-
linear-gradient(var(--angle), #f00, #0f0)→ 必定失败 -
linear-gradient(calc(var(--angle) + 90deg), ...)→ 同样不生效（calc 不被接受为方向） - 唯一合法的方向写法：角度字面量（
135deg）、方向关键字（to bottom）或from+ 关键字（仅限conic-gradient）
想旋转？改用 conic-gradient + border-image
conic-gradient 是目前唯一能真正靠变量驱动“环绕旋转”的渐变类型，它支持 from var(--rotate)，且现代浏览器（Chrome ≥ 110、Firefox ≥ 111、Safari ≥ 17.4）已稳定支持在 @keyframes 中更新该变量。
但注意：别把它塞进 background-image ——那样会覆盖内容、破坏圆角、拉伸失真。正确做法是用 border-image 模拟动态边框：
立即学习“前端免费学习笔记（深入）”；
- 必须先设
border: 4px solid transparent，否则border-image不生效 -
border-image值里要带fill / 1 / 0 stretch，其中fill确保边框内容不被裁掉 -
--rotate: 0deg必须带单位，漏掉deg会导致动画完全静止
示例结构：
.rotating-border {
--rotate: 0deg;
border: 4px solid transparent;
border-image: conic-gradient(from var(--rotate), #0ff, #f0f, #0ff) fill / 1 / 0 stretch;
animation: spin 8s linear infinite;
}
@keyframes spin {
to { --rotate: 360deg; }
}
用 @property 注册角度变量只对 conic-gradient 有效
@property 能让变量参与插值，但它本身不能“修复” linear-gradient 对变量的拒绝。它只在变量被用于可动画属性（如 transform、color）且类型匹配时起作用。
对旋转类效果，@property 的价值在于：让 --rotate 可被 transition 平滑过渡（比如鼠标悬停微调），或在 JS 动态设置时避免跳变：
- 注册必须写全：
@property --rotate { syntax: "<angle>", inherits: false, initial-value: 0deg; } - 只注册不调用没意义——得配合
conic-gradient(from var(--rotate), ...)才真正起效 - 注册后，
element.style.setProperty('--rotate', '90deg')就能触发平滑过渡（前提是元素有transition: --rotate 0.3s ease）
JS 控制变量时容易踩的坑
用 JS 更新 --rotate 或颜色变量看似简单，但顺序和方式不对，动画就卡住或跳帧：
- 避免在
requestAnimationFrame里高频调用style.setProperty——CSS 变量本身不慢，但高频触发布局+重绘会拖垮性能 - 批量更新多个变量时，不要逐个
setProperty，改用element.style.cssText += '--rotate: 45deg; --color: #00f;'，减少样式计算次数 - 监听动画结束？用
transitionend事件，但必须过滤event.propertyName === 'background-image'或'--rotate'，而不是笼统监听background - 检查是否生效？看 computed style 中的
background-image或border-image值，如果是none或空字符串，大概率是变量未定义、拼写错误，或被简写属性（如background）覆盖了
真正复杂的动态旋转，核心不在“怎么写”，而在“选对函数”——linear-gradient 天然不支持角度变量动画，强行硬刚只会浪费时间；conic-gradient 加 border-image 是目前最可靠、最可控的路径，只是需要多写几行基础样式来兜底。
