直接用CSS变量改linear-gradient角度会卡顿，因未注册的--angle被当字符串替换，无插值；须用CSS.registerProperty({name:'--angle',syntax:'<angle>'})提前注册，并单独设置background-image。
为什么直接用 CSS 变量改 linear-gradient 角度会卡顿
浏览器默认不把 --angle 这类未声明类型的自定义属性当“可动画值”处理。哪怕你写了 transition: background-image 0.3s，只要变量没注册类型，Chrome/Safari 就按“字符串替换”执行——角度从 45deg 跳到 135deg，中间不插值，视觉上就是突变。
CSS.registerProperty() 必须在 JS 中提前注册
它不是纯 CSS 功能，必须在样式表加载前或 <head> 里用脚本注册，否则变量无效。注册后浏览器才明白：“哦，这个 --angle 是角度单位，可以做线性插值”。
- 注册代码要放在
<script>标签里，且最好在document.documentElement渲染前执行（比如<head>内或DOMContentLoaded早期） - 必须指定
syntax: '<angle>'，不能写'<number>'或留空 -
inherits: false是常规选择；initial-value建议设为实际用到的默认角度（如45deg）
if (CSS?.registerProperty) {
CSS.registerProperty({
name: '--angle',
syntax: '<angle>',
inherits: false,
initialValue: '45deg'
});
}background-image 必须单独写，不能用 background 简写
一旦用了 background: linear-gradient(...) 这种简写，JS 修改变量时会触发整条声明重计算，浏览器无法比对前后两个渐变函数的结构差异，直接全量重绘，过渡就断了。
- 只用
background-image设置渐变，其他背景属性（background-color、background-size）分开写 -
linear-gradient内部必须用var(--angle)，不能拼成字符串（如calc(var(--angle) * 1)会破坏类型识别） - Safari 16.4+ 才真正支持
background-image过渡，旧版 Safari 会 fallback 为硬切
.grad-box {
background-image: linear-gradient(var(--angle), #ff6b6b, #4ecdc4);
background-color: #fff;
background-size: cover;
transition: background-image 0.4s ease;
}JS 修改变量时别用 style.setProperty() 拼错名
大小写、连字符、空格都必须和注册时完全一致。注册的是 --angle，就不能在 JS 里写成 --Angle 或 angle；设成 120deg 就不能传 "120"（缺单位）或 "120 deg"（多空格）。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
document.documentElement.style.setProperty('--angle', '135deg') - 避免在事件高频触发时（如
mousemove）无节制设值，加防抖或用requestAnimationFrame节流 - 调试时检查 computed style：如果
background-image显示为none或空，大概率是变量名不匹配或注册失败
真正容易被忽略的是注册时机和语法严格性——CSS.registerProperty() 不会报错，注册失败时只是静默失效，变量照常能读写，但动画依然卡顿。务必确认控制台没输出 Uncaught TypeError: CSS.registerProperty is not a function，且在 DevTools 的 Styles 面板里能看到变量名带小图标（表示已注册）。
