box-shadow过渡失效主因是初始值用none导致无法插值，应统一用数值形式（如0 0 0 0 rgba(0,0,0,0)）；需兼顾移动端:active替代、性能优化（升层/控模糊值）、深色模式适配及真机测试。
按钮:hover时阴影不出现或闪烁
直接写 box-shadow + transition 但没生效？大概率是过渡属性没锁定。CSS 过渡只对可计算、可插值的属性生效，而 box-shadow 的「无阴影」状态如果写成 none，浏览器无法插值——它会跳变或干脆不动画。
正确做法是统一用数值形式声明阴影，哪怕初始状态是“零偏移零模糊”：
button {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.2s ease;
}
button:hover {
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}
-
box-shadow四个值必须齐全（水平偏移、垂直偏移、模糊半径、扩展半径），不能省略 - 避免在
:hover中突然增加新阴影层（比如从单层变双层），会导致过渡中断 - 如果按钮有
border-radius，阴影过渡会更自然；没有圆角时，阴影边缘容易显得生硬
移动端 hover 效果失效
手机浏览器不触发 :hover（除非模拟悬停），所以纯靠 :hover 的阴影在触屏设备上基本不可见。这不是 bug，是规范行为。
解决思路不是强行 hack，而是分层处理：
立即学习“前端免费学习笔记（深入）”；
- 保留
:hover用于桌面端视觉反馈 - 对触摸设备，用
:active替代：按下瞬间触发阴影收缩或加深，释放后还原 - 必要时加 JS 监听
touchstart/touchend切换 class，控制阴影强度
例如：button:active { box-shadow: 0 2px 6px -1px rgba(0,0,0,0.3); }，比 hover 值略小，模拟按压感。
阴影过渡卡顿或掉帧
高频重绘阴影容易引发 layout thrashing，尤其在低端 Android 或旧版 Safari 上。根本原因是 box-shadow 属于「昂贵属性」，浏览器需为每一帧重新合成图层。
优化方向很明确：
- 优先用
transform: translateZ(0)或will-change: box-shadow提前升层（但别滥用，will-change本身有开销） - 把模糊值（blur radius）控制在 12px 以内，超过后性能下降明显
- 避免同时过渡多个 expensive 属性（比如
box-shadow+background-color+transform），拆成独立 transition - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看阴影区域是否高频闪烁
深色模式下阴影对比度不足
默认用 rgba(0,0,0,0.2) 在浅色背景上效果好，但在深色背景里几乎看不见。别指望用户手动切主题时重写所有阴影值——得靠 CSS 自适应。
利用 color-scheme 和 prefers-color-scheme 是最稳妥的方式：
@media (prefers-color-scheme: dark) {
button {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08);
}
button:hover {
box-shadow: 0 4px 12px -2px rgba(255, 255, 255, 0.16);
}
}
- 深色模式下用白色/高亮色阴影，透明度适当提高（0.08 → 0.16），否则显得发灰
- 不要依赖 JavaScript 检测主题，CSS 媒体查询更轻量、更可靠
- 如果项目已用 CSS 变量管理主题，可将阴影颜色抽成
--shadow-color，再配合:root[data-theme="dark"]覆盖
阴影不是装饰性点缀，它承载着层级暗示和交互反馈。参数调得再细，也得在真机上点几下、滑几次，看手指按下去那一刻阴影有没有跟上节奏——这才是最终验收标准。
