@property必须显式声明inherits: false且置于:root或顶层@layer中，syntax与initial-value需单位匹配，js设置须带单位，动画时建议用calc()包装var()。
为什么--size设了值却不能transition
因为没注册类型，浏览器只把它当字符串处理。写transition: --size 0.3s看起来没错，实际完全不触发——它连“这是个长度”都不知道，更没法在16px和24px之间插值。
@property必须写在:root或@layer顶层，不能塞进选择器里
常见错误是这么写：.card { @property --size { syntax: "<length>"; ... } }</length>。浏览器直接忽略整条规则，控制台也不报错，静默失效。
- ✅ 正确位置只有三个：
:root、独立的@layer块（如@layer base）、未嵌套的全局样式块 - ❌ 不能出现在
@media、@supports、组件类选择器、伪类内部 - 如果用
@import引入，确保该文件里@property没被任何大括号包裹
syntax: "<length>"</length>和initial-value必须单位+数值同时匹配
initial-value: 16会失败，initial-value: "16px"也会失败——前者缺单位，后者是字符串，都不符合<length></length>语法要求。
- ✅
initial-value: 16px、initial-value: 2em、initial-value: calc(1rem + 4px) - ❌
initial-value: 16（无单位）、initial-value: "16px"（带引号）、initial-value: 16%（%不属于） - JS修改时同理：
el.style.setProperty('--size', '24px')✅，el.style.setProperty('--size', 24)❌
长度变量参与动画时要注意calc()包装
直接写width: var(--size)可能不触发重排优化，某些Chromium版本下动画卡顿；更稳妥的是用calc()显式构造数值上下文。
- ✅
width: calc(var(--size) * 1)、padding: calc(var(--size) / 2) - ❌
transform: scale(var(--size))（--size是长度，但scale()要数字） - 渐变、阴影等复合属性需拆解：比如边框宽度用
--border-width，圆角用--radius，各自注册
最容易被忽略的是inherits: false这个参数——漏掉它，@property规则整体无效，不是警告，是彻底不注册。别依赖默认值，必须显式写出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
