box-shadow 缩放失衡本质是 px 单位不随视口或 transform 变化；应改用 rem + CSS 变量 + clamp() 实现流体阴影，scale 交互时通过变量乘法动态调整，兼顾兼容性与性能。
box-shadow 的缩放问题本质是像素单位不随视口变化
直接写 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 时，阴影的 4px 和 12px 是固定像素值，缩放（比如 pinch-zoom、transform: scale() 或浏览器缩放）不会自动等比放大阴影，导致视觉失衡：卡片变大了，阴影却显得单薄甚至“贴边”。这不是 bug，是 CSS 单位的设计逻辑——px 是设备像素锚定的，不参与 CSS 坐标系缩放计算。
用 CSS 自定义属性 + calc() 动态生成 shadow 值
核心思路：把阴影尺寸映射为相对单位（如 rem 或视口比例），再通过变量控制缩放系数。实际中推荐用 rem 作基础，因为它随根字体大小变化，而现代响应式布局常通过 html { font-size: clamp(...) } 实现流体字号——阴影就能“被动跟随”。
示例实现：
html {
font-size: clamp(14px, 2.5vw, 18px);
}
.card {
--shadow-blur: 1.2rem;
--shadow-offset-y: 0.3rem;
--shadow-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}
这样当视口宽度变化触发 font-size 调整时，rem 值实时重算，box-shadow 自动响应。注意：clamp() 中的 2.5vw 是关键，它让字号（从而阴影）真正流体化。
scale() 变换下必须配合 transform-origin 和 shadow 重算
如果卡片用了 transform: scale(1.2)（比如悬停放大），仅靠 rem 不够——因为 transform 不影响布局盒模型，但会缩放整个渲染层，包括阴影。此时阴影会被等比拉伸，但偏移和模糊半径仍按原始尺寸渲染，造成错位。
解决方法是手动按比例放大 shadow 参数：
- 给卡片设
transform-origin: center，避免缩放中心偏移导致阴影“漂移” - 用
:hover切换变量值，例如：--shadow-offset-y: 0.36rem（原0.3rem × 1.2） - 或更灵活地用
calc()直接关联缩放系数：box-shadow: 0 calc(var(--shadow-offset-y) * 1.2) calc(var(--shadow-blur) * 1.2) var(--shadow-color) - 注意：不要在
scale()同时又用rem流体，二者叠加易失控；建议统一用变量驱动，scale仅负责形变，阴影由变量控制
兼容性与性能陷阱：避免在 :hover 中频繁重排
Firefox 和旧版 Safari 对 calc() 在 box-shadow 中的解析有延迟，尤其嵌套多层 var() 时。实测发现以下写法更稳：
.card {
--s: 1;
box-shadow: 0 calc(var(--shadow-offset-y) * var(--s)) calc(var(--shadow-blur) * var(--s)) var(--shadow-color);
}
.card:hover {
--s: 1.2;
}
这种“单变量乘法”比 calc(var(--a) * var(--b) + var(--c)) 更少触发重计算。另外，阴影模糊值不宜过大（如超过 3rem），否则在低端设备上会明显掉帧——模糊半径每翻倍，GPU 渲染成本约呈平方增长。
真正难处理的是混合场景：同时存在视口缩放、用户 zoom、以及交互 scale。这时别硬扛，优先保证主要断点（如手机/平板/桌面）下的阴影比例协调，用 @media (hover: hover) 和 @media (max-width: ...) 分层覆盖变量值，比试图写一个“万能公式”更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
