inherits控制css自定义属性是否继承父元素计算值：设为true则遵循继承链，false则不继承，必须显式声明且与syntax同为必需字段。
inherits 控制自定义属性是否从父元素继承值
它不是“要不要继承”这种模糊概念，而是决定该 CSS 变量在计算时是否遵循 CSS 继承链——和 color、font-family 这类原生可继承属性的行为一致。设为 true 后，子元素未显式设置 --my-color 时，会取父元素计算后的值；设为 false 则完全不继承，子元素只能靠 var(--my-color, fallback) 或顶层 initial-value 回退。
inherits: false 是大多数颜色/尺寸变量的合理默认
比如主题色、容器宽度这类“上下文无关”的变量，通常不希望子元素意外继承父级的 --card-width 导致布局错乱。常见错误是省略 inherits，导致整个 @property 规则被浏览器忽略——它和 syntax 一样是必需字段，不能缺。
-
inherits必须显式写true或false，不能留空、不能写inherit（那是另一个 CSS 属性） - 设为
true时，若父元素没定义该变量，子元素仍会回退到initial-value，不是 undefined - 动画中继承行为会影响插值起点：父元素设了
--hue: 120且inherits: true，子元素@keyframes从var(--hue)开始插值，而非从initial-value
inherits: true 的典型场景是文本样式变量
当你用 @property 管理 --text-weight 或 --text-color 这类语义化文本变量时，设 inherits: true 能让子元素自动获得父级设定的权重，无需每层重复声明。但要注意：
- 必须搭配合理的
initial-value，比如initial-value: normal对应font-weight，而不是400（虽等价，但类型不匹配会报错） - 如果父元素用
!important覆盖变量值，继承来的值不会带!important语义，这点和原生属性不同 - 调试时可用
getComputedStyle(el).getPropertyValue('--text-weight')查看继承结果，但注意返回的是计算后值，不是原始声明
inherits 和 transition / @keyframes 的隐式耦合
这个点容易被忽略：当 inherits: true 且父元素正在过渡某个变量时，子元素继承的不是“起始值”或“结束值”，而是当前帧的实时计算值。这意味着：
- 父元素
transition: --bg-hue 2s，子元素即使没写 transition，其背景色也会随父元素平滑变化（前提是syntax: '<number>'</number>且inherits: true） - 若子元素自己也设置了
--bg-hue，则继承中断，走自己的值——这和原生color行为完全一致 - 服务端渲染（SSR）场景下，首屏 HTML 中父元素若没内联该变量，子元素将直接使用
initial-value，直到 JS 注入或 CSS 加载完成
initial-value: transparent 配 inherits: true，当父元素未设值时子元素得透明，但父元素设了 rgba(0,0,0,0.1) 后子元素立刻继承半透——这种渐进式渗透在深色模式切换时容易引发意外交互。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
