css阴影无法自动按元素尺寸缩放，box-shadow和text-shadow仅支持固定单位（px、rem），必须通过媒体查询分段设置或resizeobserver配合js动态计算。
纯 CSS 无法让 box-shadow 或 text-shadow 的数值“自动按元素宽高缩放”，所有所谓“动态”都得靠人工分段控制或 JS 注入——别被网上那些 calc(10% * var(--w)) 的伪代码误导，它根本不会生效。
box-shadow 响应式必须用媒体查询分段写死
浏览器不解析元素实际尺寸，box-shadow 的 blur-radius 和 spread-radius 只认固定单位（px、rem），且不会随 transform: scale() 缩放。所以唯一可靠路径是手动设断点：
- 小屏（
max-width: 480px）：用inset 0 1px 2px rgba(0,0,0,0.15)或0 2px 4px rgba(0,0,0,0.1)，避免模糊值过大导致边缘发虚 - 中屏（
481px至768px）：升一级，比如inset 0 2px 4px rgba(0,0,0,0.18)，加一点扩散感但不压字形 - 大屏（
min-width: 769px）：可上0 4px 12px -2px rgba(0,0,0,0.1)，负spread-radius收紧投影，强化浮起感 - 别用
em写box-shadow：它继承父级字体大小，嵌套深时容易失控；rem更稳，但前提是:root的font-size是你可控的（比如用clamp()）
text-shadow 响应式不能靠 em 单位“自动适配”
text-shadow: 0 0.1em 0.2em black 看似响应，实则危险：小字号下模糊半径会被压缩到像素级以下，渲染糊成一团；Safari 和 Chrome 对 em 的换算逻辑还不一致。真正可用的只有像素值 + 媒体查询：
- 手机端：单层或两层，
text-shadow: 0 1px 2px rgba(0,0,0,0.2)，偏移和模糊都收敛 - 平板端：加一层浅色外扩，如
0 1px 3px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.08) - 桌面端：允许立体多层，但最外层透明度必须 ≤
0.08，否则像蒙雾 - 深色模式兼容：直接用
@media (prefers-color-scheme: dark)覆盖颜色，比如把rgba(0,0,0,0.2)换成rgba(255,255,255,0.1)
必须用 JS 动态绑定尺寸时，只监听 ResizeObserver
如果业务强要求“阴影模糊值 = 元素宽度 × 0.04”，比如宽 200px 时设 blur: 8px，那只能走 JS。但别用 window.resize——它不感知 flex/grid 重排，还高频触发：
- 用
ResizeObserver监听目标元素，回调里读element.getBoundingClientRect().width - 计算后写回内联样式：
element.style.boxShadow = `0 0 ${blur}px rgba(0,0,0,0.15)` - 避免每帧都重算：加防抖（
setTimeout延迟 50ms）或节流（每 200ms 最多一次） - 别用
drop-shadow()绑定尺寸：它不支持inset，也不响应元素尺寸变化，只适合 PNG 图标轮廓投影
最容易被忽略的是：iOS Safari 在高 DPR 屏幕下对 text-shadow 的像素采样有 ±0.3px 浮动，调完效果务必在真机上拖动页面缩放测试，看阴影有没有“飘”或“跳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
