HTML 的 style 属性中可直接用 --xxx: value 声明 CSS 变量，如 style="--accent: #007bff; --radius: 8px;"，变量作用于该元素及其所有后代，无需额外语法。
HTML 标签的 style 属性里不能直接写 var(--x)，但可以安全定义 CSS 变量（以 -- 开头），这是唯一被浏览器原生支持的“内嵌变量”方式。
style 属性里怎么写 CSS 变量
直接在 style 属性中用 --xxx: value 形式声明变量，值会作用于该元素及其所有后代。不需要任何额外语法或包裹：
<div style="--accent: #007bff; --radius: 8px;">...
注意：style 中只能定义变量，不能引用（var() 不生效）；也不能混用普通样式和变量声明——虽然浏览器会忽略无效部分，但建议分开写更清晰。
立即学习“前端免费学习笔记（深入）”；
- 变量名必须以
--开头，区分大小写，比如--Accent和--accent是两个变量 - 值支持任意合法 CSS 值：颜色、长度、
calc()表达式、甚至字符串（用于content） - 单位必须显式写出，
--size: 14❌，应写成--size: 14px✅ - 空格敏感：
--gap: 12 px会被解析为无效值，必须是--gap: 12px
为什么 style="color: var(--c)" 不起作用
因为 HTML 的 style 属性不解析 CSS 函数，只接受静态属性值。浏览器看到 color: var(--c) 会当作非法声明丢弃，最终使用默认颜色（通常是 inherit）。
常见错误场景：
-
<p style="color: var(--text-color)">文字</p>→ 文字无色 -
<div style="--c: red; color: var(--c)">→color部分仍被忽略，变量定义有效但无法当场调用 - 试图在
style里写媒体查询或伪类 → 整个style值可能被整体拒绝
正确路径是：先用 style="--x: ..." 注入变量，再靠外部 CSS 规则读取，例如：
<div class="card" style="--card-bg: #fff;"></div>
配合 CSS：.card { background-color: var(--card-bg); }
内联变量 + 外部 CSS 的协作要点
变量从 style 注入后，并非自动“穿透”到所有子元素样式中——它只是设定了继承起点，子元素需显式用 var() 引用，且父元素必须能传递该变量（即未被 all: unset 或 inherit 覆盖）。
- 检查 DevTools 的 “Computed” 面板，看目标元素的
var(--x)是否解析出实际值；若显示unset或空，说明上游未传下来 - 避免跳层依赖：如果
.card设了--card-padding，而.card > .content > .title直接用padding: var(--card-padding)，中间的.content就不能重置或屏蔽该变量 - 回退值只在 CSS 层生效：
color: var(--text, #333)中的#333在 JS 里读不到——getComputedStyle(el).getPropertyValue('--text')返回空字符串时，不代表回退值已启用 - IE 完全不支持，旧版 Safari（≤15.6）需测试前缀兼容性；移动端 Android Webview 版本低时也容易静默失败
JS 动态更新内联变量的坑
用 el.style.setProperty('--x', 'val') 更新变量是安全的，但要注意几个边界：
- 不要用
el.setAttribute('style', '...')覆盖整个 style 字符串——会清空之前所有内联变量 - 修改变量后，依赖它的动画不会自动重播，需手动触发：比如移除再添加动画 class，或重设
animation属性 -
setProperty对:root有效，但对普通元素设置后，其子元素只有在 CSS 规则中用了var()才会响应变化 - 服务端渲染（SSR）时，直接输出
style="--x: val"是最稳的方式；依赖 JS 注入会导致首屏闪动或样式错位
真正容易被忽略的是：内联变量不是“万能胶”，它解决的是组件级配置隔离问题，而不是替代 CSS 架构。滥用 style="--x" 堆砌逻辑，会让 HTML 变得难以维护，尤其当变量数量超过 5 个或需要条件组合时，就该考虑抽离为 class 或用 CSS-in-JS 方案了。
