@property必须写在:root或@layer顶层且syntax与initial-value严格匹配，否则整条规则被静默忽略；syntax不匹配会导致变量退化为字符串，无法参与transition或@keyframes动画。
不声明 syntax，浏览器根本不会“认”这个变量能参与动画
浏览器对未注册类型的 --my-var 只当它是纯字符串——哪怕你写 transition: --my-var 0.3s，也不会触发任何插值计算。这不是兼容性问题，而是规范层面的硬性限制：@property 的 syntax 是告诉 CSS 引擎“这个变量的值该怎么解析、怎么混合、怎么过渡”的唯一依据。
syntax 不匹配 initial-value 会导致整条 @property 被静默丢弃
常见错误包括：
-
syntax: "<color>"</color>却配initial-value: 0→ 静默失效（数字不是颜色） -
syntax: "<length>"</length>却配initial-value: 10→ 静默失效（缺单位，必须是10px或1em） -
syntax: "<number>"</number>却配initial-value: "1.5"→ 静默失效（带引号的字符串）
一旦匹配失败，整条 @property 规则被忽略，后续所有 var(--x) 都退化为无类型字符串变量，transition 和 @keyframes 全部失效，且控制台不报错。
@property 必须写在 :root 或顶层 @layer，嵌套进选择器里等于没写
很多人把 @property 塞进 .card { ... } 或 @media 里，结果发现动画不动——这不是 bug，是规范强制要求：
立即学习“前端免费学习笔记（深入）”；
- 只能出现在
:root下（最常用） - 或未嵌套的
@layer base { @property ... }块顶层 - 用
@import引入的 CSS 文件中，也得确保它没被包裹在任何选择器内
否则整条规则被浏览器静默忽略，变量无法注册，类型也就无从谈起。
syntax 写成 "*" 看似省事，但会断掉关键能力
syntax: "*" 表示接受任意值，但它放弃所有类型校验和插值能力：
- 无法参与
transition或@keyframes中的颜色/长度/角度插值 - 单位缺失时（如
--size: 10而非--size: 10px）直接 fallback 到字符串混合，结果不可控 - 失去类型约束后，
inherits和initial-value的语义也大幅弱化
真正需要“宽松”时，优先考虑组合语法，比如 syntax: "<length> | <percentage>"</percentage></length>，而不是退回到通配符。
