initial-value 不是可选的，因为除 syntax 为 * 外，缺省会导致 @property 规则被忽略且无报错；它必须严格匹配 syntax 类型，且仅作自身未设置时的 fallback，不参与继承。
为什么 initial-value 不是可选的？
因为浏览器不会凭空猜一个默认值——@property 规则中，只要 syntax 不是 *（通配），initial-value 就是强制必填项。缺了它，整条 @property 规则会被直接忽略，连 DevTools 的 “Properties” 面板里都看不到注册痕迹。
initial-value 必须严格匹配 syntax 类型
类型不匹配会导致注册失败，且无任何报错提示，静默失效：
-
syntax: '<color>'</color>→initial-value: #ff0✅；initial-value: 'red'✅；initial-value: '123'❌（解析失败） -
syntax: '<length>'</length>→initial-value: 0❌（必须带单位，如0px或1rem） -
syntax: '<number>'</number>→initial-value: 1.5✅；initial-value: '1.5'❌（字符串不被接受） -
syntax: '*'→initial-value可省略，但此时属性无法参与动画插值，失去注册意义
继承场景下 initial-value 的作用边界
initial-value 是“未显式设置时的 fallback”，不是“继承链起点”。它只在元素自身没通过 var(--x) 或内联 style 设置该属性时生效；一旦父元素设了 --x: blue 且 inherits: true，子元素读取的就是这个 blue，而非 initial-value。
常见误判点：
- 以为
initial-value能覆盖父级继承值 → 实际上它完全不参与继承计算 - 在 :root 上注册却漏写
initial-value→ 导致整个主题系统变量“看起来定义了，实则没注册” - 用 CSS 预处理器生成
@property时，忘了把变量值转为合法语法字面量 → 比如拼出initial-value: var(--fallback)，这是非法的
调试注册是否成功的最简方法
打开 Chrome / Edge DevTools → Elements 面板 → 选中任意元素 → 右侧 Styles 标签页底部找 “Properties” 小节（需开启实验性功能：chrome://flags/#devtools-property-registry）。只有正确注册的属性才会显示其 syntax、inherits 和 initial-value。
如果这里为空，优先检查三件事：
-
@property规则是否在有效样式表中（比如没被@layer隐藏或条件注释截断） -
initial-value值是否带单位/引号/类型字面量（例如<angle></angle>要写initial-value: 45deg，不能写45） - 是否存在重复注册同名属性（后注册的会覆盖前一个，但不报错）
真正容易被忽略的是：注册成功 ≠ 动画可用——还必须确保该属性在 transition 或 @keyframes 中被显式列出，且目标值类型与 syntax 完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
