@property必须写在:root或@layer顶层，不能嵌套在选择器内；syntax与initial-value类型不匹配时整条规则静默失效，变量无法参与transition或@keyframes动画。
@property 必须写在 :root 或 @layer 顶层，syntax 和 initial-value 类型不匹配时整条规则静默失效，变量无法参与 transition 或 @keyframes。
为什么 @property 写在 .card 里完全没反应？
浏览器会直接忽略——这不是 bug，是规范强制要求。@property 不是“局部声明”，而是向 CSS 引擎注册一个全局类型契约，只能出现在 :root、@layer 顶层块，或未嵌套的全局样式块中。
常见错误现象：--size 在 .card 里设了值，transition: --size 0.3s 却不动；控制台无报错，只是静默失败。
- ✅ 正确写法：
:root { @property --size { syntax: ""; inherits: false; initial-value: 16px; } } - ✅ 也合法：
@layer base { @property --size { syntax: ""; inherits: false; initial-value: 16px; } } - ❌ 错误写法：
.card { @property --size { ... } }→ 被丢弃
syntax: "" 和 initial-value 怎么配才不翻车？
syntax 不是装饰项，它是解析开关。一旦不匹配，浏览器连 initial-value 都不读，整条规则被丢弃，后续所有 var(--size) 都退化为普通字符串变量，无法动画、无法插值。
-
syntax: "→" initial-value必须带单位，如10px、1em、calc(2rem + 4px)；写10或"10px"都失效 -
syntax: "→ 只接受纯数字，如" 10、-2.5；写"10"或10px都失效 -
syntax: "→ 必须是合法颜色值，如" #000、rgb(0,0,0)、transparent；写0或"black"都失效 -
syntax: "*"最宽松，但放弃类型校验，动画插值可能中断（比如单位缺失时）
注册后，怎么让 --size 真正动起来？
没注册的 --size 在 CSS 里就是纯字符串。你写 transition: --size 0.3s，浏览器不会报错，但也不会动——它不知道怎么在两个字符串之间做中间帧计算。
- 注册后，浏览器才获得插值能力，但仍有现实限制：
-
rotate: var(--deg)不生效，必须写成rotate: calc(var(--deg) * 1deg)（Chromium 当前强制要求触发数值上下文） - 渐变动画要拆成多个注册属性，比如
--start-color和--end-color，再组合进linear-gradient() - @keyframes 里不能直接写
--size: 10px; --size: 20px;，得用from { --size: 10px; } to { --size: 20px; }
浏览器支持仍是硬门槛，别把它当基础能力用
目前仅 Chromium 系（Chrome、Edge、Opera）和 Safari 16.4+ 支持，Firefox 仍无明确时间表。生产环境若需降级，得搭配 JS 检测 + fallback 样式，不能只靠 @supports —— 因为 @property 失效是静默的，@supports 无法捕获这种类型匹配失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
