hover时加深box-shadow需同步增大模糊半径、扩散半径、y偏移及透明度，并在非hover状态添加transition确保进出动画平滑；移动端需兼容:active或@media(hover:hover)。
hover 时用 box-shadow 加深阴影最直接
想让元素在鼠标悬停时阴影变深，核心就是改 box-shadow 的第三个参数（模糊半径）和第四个参数（扩散半径），同时可微调偏移量和颜色透明度。不要试图靠多层 text-shadow 或伪元素模拟——既难控又容易糊边。
常见错误是只改颜色（比如从 rgba(0,0,0,0.2) 到 rgba(0,0,0,0.5)），但视觉加深感弱；真正有效的是同步加大模糊值和扩散值。
- 基础写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.2); - hover 加深写法：
box-shadow: 0 4px 12px 2px rgba(0,0,0,0.35);（y 偏移↑、模糊↑、扩散↑、透明度↑） - 加
transition让变化平滑：transition: box-shadow 0.2s ease;，否则会“啪”一下跳变
为什么 transition 必须写在非 hover 状态下
transition 写在 :hover 里只对「进入悬停」生效，离开时阴影会立刻消失，没有收尾动画。这是新手高频踩坑点。
- ✅ 正确：把
transition: box-shadow 0.2s ease;放在原始选择器（如.card）里 - ❌ 错误：只写在
.card:hover中 - 如果同时动多个属性（比如还缩放），别写成
transition: all 0.2s;—— 会意外触发重排，推荐明确列出：transition: box-shadow 0.2s ease, transform 0.2s ease;
移动端 hover 不触发？得补 :active 和媒体查询
纯 :hover 在 iOS Safari 和多数安卓浏览器里基本不工作（触摸设备无“悬停”概念）。不加兼容处理，用户点下去毫无反馈。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：加
:active状态，样式和:hover一致（适合按钮类） - 更稳妥：用
@media (hover: hover) and (pointer: fine)包一层 hover 样式，确保只在支持悬停的设备上启用 - 注意：Safari 对
box-shadow的硬件加速不敏感，大量卡片同时 hover 可能掉帧，此时可加transform: translateZ(0);强制 GPU 渲染
阴影加深后边缘发虚或溢出容器
加深阴影常伴随模糊值变大，容易导致阴影超出父容器裁剪（尤其父元素有 overflow: hidden）或看起来“脏”。这不是 bug，是 box-shadow 的渲染特性。
- 检查父容器是否设置了
overflow: hidden—— 阴影会被裁掉，需改为overflow: visible或留出足够padding - 避免过度增大扩散值（如
6px以上），它会让阴影块变“肿”，失真感强；优先拉高模糊值（8px–12px更自然） - 深色背景上用浅灰阴影（如
rgba(255,255,255,0.1)）比黑阴影更通透，别硬套同一套 rgba 值
阴影不是越重越好，关键在对比度和空间暗示是否匹配当前 UI 层级。一个按钮加深太多，反而像要弹出来砸脸。
