box-shadow基础参数需严格按h-offset、v-offset、blur-radius、spread-radius、color顺序配置，前两项必设，blur过大易发虚，spread为负会裁剪而非收紧，推荐起手值0 4px 12px -2px rgba(0,0,0,0.1)。
box-shadow 基础参数怎么配才不糊？
阴影发虚、边缘溢出、层级错乱——多数问题出在 box-shadow 四个参数没对齐视觉预期。它写法是：box-shadow: h-offset v-offset blur-radius spread-radius color，其中前两个必须设（哪怕为 0），后两个可省略但不能跳过。
常见踩坑：blur-radius 过大会让卡片边缘“溶掉”，尤其在高 DPI 屏幕上更明显；spread-radius 为负值会收缩阴影范围，正数才扩大——很多人误以为负值能“收紧”阴影，其实只是裁剪了模糊区域。
- 推荐起手值：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1)（轻微下移 + 中等模糊 + 轻微内收，避免浮肿感） - 深色背景上，
rgba(0,0,0,0.15)比0.1更稳；浅色背景建议用rgba(0,0,0,0.08) - 别用
inset，悬浮卡片要的是外投影，inset会吃掉边框或导致内凹错觉
hover 位移该用 transform 还是 top/left？
用 top 或 left 触发重排（reflow），动画卡顿明显；transform: translateY(-4px) 是 GPU 加速的平移，性能好且兼容性足（IE10+ 都支持）。
关键点：位移量要和 box-shadow 的 v-offset 方向一致，否则动起来像“被吸上去又掉下来”。比如阴影向下偏移 4px，hover 就向上移 4px，视觉上才像“浮起”。
立即学习“前端免费学习笔记（深入）”；
- 务必搭配
transition: all 0.2s ease，只过渡transform和box-shadow更精准：transition: transform 0.2s ease, box-shadow 0.2s ease - 别给父容器设
overflow: hidden，否则位移时卡片顶部会被裁掉 - 移动端 hover 无效，但
:focus-within或点击态可 fallback，不过纯 CSS 无法完美模拟，得加 JS 监听touchstart
卡片悬浮时阴影变大，但别让布局跳动
阴影扩大本身不会触发重排，但如果你同时改了 padding、border 或用了 margin 模拟位移，布局就会晃。真正安全的做法：所有尺寸变化只靠 transform 和 box-shadow，卡片自身 width/height 完全固定。
- hover 状态加一层更强阴影：
box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15)（v-offset 和 blur 同比放大，spread 保持 -4px 防溢出） - 如果卡片有圆角，确保
border-radius在 hover 前后一致，否则动画过程会出现“角突然变尖”的闪烁 - 阴影颜色别随主题色动态变——CSS 变量可以传，但 runtime 计算 rgba 透明度容易出错，建议预设几套固定值
Chrome DevTools 里阴影看不见？
不是代码错，大概率是开启了“硬件加速强制关闭”或启用了“禁用合成层”调试选项。打开 DevTools → Settings → Preferences → Elements → Enable paint flashing 关掉，再检查 box-shadow 是否被父级 overflow: hidden 或 clip-path 截断。
- 快速验证：临时加
outline: 1px solid red看卡片真实尺寸，阴影是否超出 outline 范围 - 用
filter: drop-shadow()替代？别。它不尊重border-radius，圆角卡片边缘会漏光，且性能略差 - Firefox 有时对负
spread-radius渲染更严格，若阴影消失，试着把 -2px 改成 -1px 再试
真正麻烦的是多层卡片堆叠时的 z-index 和阴影叠加顺序——这时候 shadow 不是“画出来”的问题，而是“谁盖谁”的问题，得看父容器 stacking context 是否意外创建。
