hover时box-shadow不生效最常见原因是父元素overflow:hidden裁剪阴影或z-index层级异常；应检查overflow、z-index及transform触发的层叠上下文，并为默认状态设box-shadow:none以确保transition平滑。
hover 时 box-shadow 不生效的常见原因
最常遇到的情况是：写了 :hover { box-shadow: ... } 却没反应，不是语法错，而是父元素或自身“挡住了”效果。比如父容器设置了 overflow: hidden，阴影直接被裁掉；或者元素本身 z-index 太低，被兄弟元素盖住；还有可能是用了 transform: scale() 之类触发了新的层叠上下文，导致阴影渲染层级异常。
- 检查父级是否带
overflow: hidden或overflow: clip—— 这是最隐蔽也最高频的坑 - 确认该元素没有被
position: relative+z-index: -1之类拉到背景层下面 - 如果用了
transform（如scale、translateZ），记得加will-change: transform或显式设置z-index: 1来稳定层叠顺序
box-shadow 在 hover 中的参数取舍
写 box-shadow 别堆参数，hover 状态下人眼对「柔和度」和「距离感」最敏感。四个值就够用：offset-x offset-y blur-radius spread-radius color，其中 spread-radius 很少需要，多数时候留空或设为 0 更可控。
- 推荐起步值：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)—— 距离适中、模糊柔和、带轻微内收避免突兀扩张 -
blur-radius超过24px在小盒子上会显得发虚，响应式页面里建议配合prefers-reduced-motion降级 - 别用纯黑
#000，用rgba(0,0,0,0.1)～rgba(0,0,0,0.2)更自然；深色模式下可搭配@media (prefers-color-scheme: dark)改颜色
用 transition 平滑过渡 shadow 变化
直接写 :hover { box-shadow: ... } 会硬切，加 transition 才像“浮起来”。但别只写 all 0.2s，太粗暴，容易拖慢重绘；只过渡 box-shadow 本身更精准。
- 必须给默认状态也设一个
box-shadow（哪怕为none），否则首次 hover 会有延迟或跳变 - 推荐写法：
transition: box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 这个贝塞尔曲线比默认ease更轻快 - 如果盒子同时有
transform（如translateY(-2px)），把两个属性一起过渡：transition: box-shadow 0.2s, transform 0.2s
移动端 hover 的兼容性现实
真正在手机上点一下就触发 :hover？别指望。iOS Safari 和安卓 Chrome 都只在“模拟悬停”阶段短暂触发（比如长按后松开），且不保证一致。靠 :hover 做核心交互，在移动设备上等于没做。
立即学习“前端免费学习笔记（深入）”；
- 功能型阴影（比如按钮点击反馈）必须搭配
:active或 JS 的touchstart/touchend - 展示型阴影（比如卡片浮起）可以保留
:hover，但得接受它在移动端基本不工作 —— 不是 bug，是规范行为 - 想统一体验？用
@media (hover: hover) and (pointer: fine)包一层，确保只在真正支持悬停的设备上启用
阴影不是加得越重越好，关键在“让盒子看起来脱离背景”，而不是抢焦点。hover 的瞬间，人眼其实只捕捉前 100ms 的变化，所以参数要精，过渡要准，设备要分清。
