css变量不能直接用于定位属性如top，必须用calc()包裹；变量值须带单位，否则calc()无法解析；margin等属性可直用var()，z-index等不支持；@keyframes中var()基本无效。
HTML 本身不支持 CSS 变量计算 —— 所有 var() 和 calc() 必须写在 CSS 作用域内，不能塞进 HTML 标签属性里。
为什么 style="top: var(--offset)" 常常不生效
定位属性（top、left、inset）要求浏览器在布局阶段就解析出确定数值，而原生 var(--offset) 不触发计算，只作字符串替换。多数浏览器会直接忽略该声明，降级为 auto 或默认值。
- ✅ 正确写法：
top: calc(var(--offset) + 4px); - ⚠️ 危险写法：
top: var(--offset);（仅在极少数新版 Safari 中偶然生效，不可依赖） - ❌ 错误写法：
top: var(--offset) - 8px;（语法非法，CSS 解析器报错并丢弃整条规则）
calc() 里用 var() 的单位陷阱
变量值必须自带单位，否则 calc() 无法推导维度。比如 --gap: 12; 是纯数字，calc(100% - var(--gap)px) 是非法拼接 —— var(--gap)px 不是字符串拼接，而是语法错误。
- ✅ 推荐定义：
--gap: 12px;，然后padding: calc(var(--gap) * 2); - ⚠️ 模糊写法：
--gap: 12;+padding: calc(var(--gap) * 1px);（能运行但易漏单位、难维护） - ❌ 绝对禁止：
--gap: 12px;+width: calc(100% - var(--gap)px);（var(--gap)px无效）
哪些 CSS 属性能直用 var()，哪些必须套 calc()
关键看属性是否“原生支持单位解析”：像 margin、padding、font-size 这类接受带单位值的属性，可直接用 var(--x)；但涉及加减偏移或布局定位时，一律走 calc()。
- ✅ 可直用：
margin: var(--gap);（前提是--gap: 1rem;） - ✅ 必须
calc()：top: calc(var(--header-height) + 1px); - ⚠️ 看浏览器：
transform: translateY(var(--offset));在 Chrome/Firefox 可行，Safari 16.4 之前需calc() - ❌ 完全不行：
z-index: var(--layer);（z-index不接受变量，也不支持calc()）
在 @keyframes 里用变量做动画值？别试了
绝大多数浏览器不解析 var() 作为动画关键帧值，写 top: var(--y); 动画根本不会动，控制台也无提示。
- ✅ 替代方案：提前算好值，用
calc()写死，或改用transform: translateY()+ CSS 变量（兼容性仍需测试） - ⚠️ 折中做法：用媒体查询分段定义不同断点下的
@keyframes，避开变量参与动画计算
真正容易被忽略的是：CSS 变量和 calc() 的组合不是“写上去就自动聪明”，它依赖你对单位、解析时机、浏览器实现差异的精确控制。一个空格、一个单位、一个括号位置不对，都会让整个表达式静默失效 —— 而且浏览器通常不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
