@property规则中syntax和inherits缺一不可，缺则整条规则被忽略；syntax指定类型时initial-value变为强制项，且须类型兼容；仅部分syntax值（如、等）支持css动画插值。
@property 语法中 syntax 和 initial-value 缺一不可
浏览器只认 @property 规则里带 syntax 和 inherits 的声明；缺任何一个，整条规则直接被忽略，变量照常可用，但失去类型校验和动画能力。如果 syntax 指定了具体类型（比如 <length></length>），initial-value 就变成强制项——不写，规则照样失效。
-
syntax: <number></number>表示只接受数字，--scale: 1.5合法，--scale: "2"会被丢弃 -
syntax: <color></color>支持#fff、rgb()、hsl()等，但red（关键字）默认不被接受，除非显式写成<color> | red</color> -
initial-value: 1必须与syntax类型兼容，比如syntax: <length></length>就不能配initial-value: 0（缺少单位），得写initial-value: 0px或initial-value: 0em
哪些 syntax 值能触发 CSS 动画插值
只有部分 syntax 值能让浏览器执行平滑过渡：比如 <length></length>、<number></number>、<percentage></percentage>、<color></color>、<angle></angle>、<time></time>。像 <url></url> 或 <image></image> 这类不可插值的类型，即使写了 transition: --bg-url 0.3s，也不会产生动画效果，只会瞬间切换。
- 想让缩放动画生效，必须用
syntax: <number></number>+initial-value: 1，再配合transform: scale(var(--scale)); -
syntax: <length-percentage></length-percentage>是复合类型，支持50%或20px，但不支持50% 20px这种双值写法 - 用
#表示列表（如<color>#</color>）时，initial-value必须是逗号分隔的合法颜色列表，例如initial-value: red, blue
JS 注册 property 与 CSS 声明的等价性
CSS.registerProperty 是运行时注册方式，和 @property 规则语义完全一致，参数名也一一对应：name 对应属性名，syntax 和 inherits 是必填，initialValue（注意 JS 里是 camelCase）在 syntax 非通用型时也强制要求。
- JS 注册后，CSS 中仍需用
var(--prop)引用，不能跳过这步直接在transition里写--prop - 若注册两次同名 property，后一次会覆盖前一次，但已应用的样式不会自动刷新，得手动触发重绘（比如改 class 或 toggle
display） - 错误写法：
CSS.registerProperty({ name: '--size', syntax: '<length>' })</length>—— 缺initialValue，注册失败且无报错，后续动画无效
容易被忽略的继承与作用域细节
inherits: true 不代表变量值自动向下传，而是指该自定义属性本身参与 CSS 继承链；也就是说，子元素没显式设置 --x 时，会取父元素计算后的值。但它不影响 :root 定义的全局变量传播——那靠的是选择器作用域，不是继承。
- 局部定义（如
.card { --color: blue; }）+inherits: true，子元素可继承这个--color值；设为false则子元素读var(--color)得到unset -
initial-value只在属性未被任何地方赋值时生效，它不覆盖:root里定义的默认值，也不影响 media query 中的条件赋值 - 调试时发现动画卡顿或值没变，先检查控制台是否输出
Failed to register property '--xxx'—— 这说明@property规则因语法错误被静默丢弃了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
