@property 是唯一原生类型安全方案，浏览器据此静默丢弃非法赋值；CSS.registerProperty 必须在样式解析前调用，否则动画逻辑被忽略，且 syntax 须严格匹配规范（如 ""），大小写、空格、引号均不可错。
@property 是唯一能做类型安全检测的原生方案，它不是“增强变量”，而是让浏览器真正理解变量类型，从而在非法赋值时静默丢弃、不触发动画、也不报错——但开发工具里能看到警告。
为什么 CSS.registerProperty 必须在 CSS 使用前调用
浏览器解析 CSS 时，如果遇到 transition: --foo 0.3s 或 @keyframes 中引用未注册的自定义属性，会直接忽略该动画逻辑，且不提示任何错误。只有提前用 JS 注册，CSS 引擎才能把 --foo 当作可插值（interpolatable）的合法属性处理。
-
CSS.registerProperty必须在<style></style>或外部 CSS 加载完成前执行，推荐放在的<script></script>中 - 重复注册同一属性名会抛
DOMException，需自行加try/catch - 注册后若 JS 赋值类型不符（如给
<color></color>赋"12px"），该次赋值被丢弃，变量值保持上一个合法值
syntax 类型写法必须严格匹配规范字符串
类型声明不是正则也不是通配符，是固定语法字符串，大小写敏感、引号不可省略、空格不能多也不能少。
- 正确：
syntax: "<color>"</color>、syntax: "<number> | <percentage>"</percentage></number> - 错误：
syntax: "color"（缺尖括号）、syntax: ""（空格/大小写）、syntax: "<color>|<percentage>"</percentage></color>（竖线前后缺空格） -
"*"表示任意值，但会失去插值能力——即无法用于transition或@keyframes - 角度类型必须写成
"<angle>"</angle>，不是"angle"或"<deg>"</deg>
过渡和动画生效的前提：属性已注册 + 值类型合法 + CSS 中显式声明
三者缺一不可。哪怕 @property 注册了、JS 赋了合法值，如果 CSS 里没写 transition: --prop 0.3s，照样没动画。
立即学习“前端免费学习笔记（深入）”；
- 动画中使用
@keyframes修改注册属性时，终点值也必须符合syntax类型，否则关键帧会被跳过 -
inherits: true时，子元素未显式设置该变量，会继承父元素注册后的当前值（不是初始值） -
initial-value必须与syntax类型完全匹配，比如syntax: "<percentage>"</percentage>就得写initial-value: "0%"，不能写"0"或"0px"
最容易被忽略的是：类型校验只发生在运行时赋值阶段，CSS 预处理器（如 Sass）或构建工具的静态检查完全无法捕获 syntax 错误；而浏览器 DevTools 的 Styles 面板里，非法值只会显示为灰色斜体，不标红也不报错——得打开 Console 才能看到 “Invalid property value” 提示。
