如何利用HTML制作带阴影的悬浮卡片?通过CSS box-shadow与hover位移

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 是否意外创建。