@property是CSS中声明自定义属性类型、初始值和继承行为的规则，但它不提供运行时类型检查——仅在解析时依据syntax（如'<color>'）尝试转换值，失败则静默回退到initial-value。
什么是 @property，它真能做类型检查？
@property 是 CSS 中少数能为自定义属性（--my-color）声明语法、初始值和继承行为的机制，但它**不提供运行时类型校验**——浏览器只在解析时按声明的 syntax 尝试转换值，失败则回退到 initial-value 或丢弃。所谓“类型检查”，本质是声明式约束，不是 JavaScript 那种动态报错。
syntax 值有哪些合法选项？哪些容易写错？
必须用字符串字面量写进 syntax，且大小写敏感。常见错误是漏掉引号、拼错关键字，或误用复合语法：
-
"<color>"✅ 支持red、#fff、rgb(0 0 0)等；"color"❌ 缺少尖括号会直接无效 -
"<number>"✅ 解析42、-3.14；"<integer>"❌ 不是标准 syntax，会被忽略 -
"<length>"✅ 接受10px、2em；"px"或"<px>"❌ 都非法 -
"<percentage> | <length>"✅ 多选一；但"<percentage> || <length>"❌||是无效分隔符
为什么设了 @property 却没生效？
三个高频原因：
- 未在
:root或目标选择器中**先声明变量再使用**：浏览器按顺序解析，@property必须出现在任何var(--x)引用之前 -
inherits: false时，子元素无法继承该变量，但很多人误以为它影响“是否可动画” - 声明了
syntax: "<color>"，却赋值--my-color: 123—— 此时值被静默丢弃，计算值变成initial-value或unset，控制台无提示
示例：
立即学习“前端免费学习笔记（深入）”；
@property --main-bg {
syntax: "<color>";
inherits: false;
initial-value: #f0f0f0;
}
<p>:root {
--main-bg: tomato; /<em> ✅ 合法，生效 </em>/
}</p><p>.box {
background-color: var(--main-bg); /<em> ✅ 可用 </em>/
}</p><p>.invalid {
--main-bg: 999; /<em> ❌ 被丢弃，实际用 initial-value </em>/
}它和 CSS 动画/transition 搭配时要注意什么？
只有 syntax 声明为可插值类型（如 <color>、<number>、<length>）时，该变量才能参与动画。否则 transition 直接跳变，@keyframes 中的中间帧被忽略：
-
syntax: "<angle>"→ 支持rotate(var(--r))动画 -
syntax: "<custom-ident>"→ 仅匹配标识符（如left），**不可动画** - 即使
syntax合法，若初始值和目标值类型不兼容（如--x: 10→--x: red），动画仍会中断
真正起作用的是浏览器内部的插值逻辑，不是你写的语法声明本身。
最易被忽略的一点：没有 devtools 提示——变量解析失败时既不报错也不警告，只能靠手动验证 computed style 或用 getComputedStyle 检查实际值。
