移动端 box-shadow 不显示或发虚的根本原因是移动浏览器（尤其 iOS Safari）的硬件加速限制，需通过强制创建合成层（如 translateZ(0)）、控制 blur-radius≤4px、降低透明度（如 rgba(0,0,0,0.08)）及避免 overflow: hidden 等方式优化。
移动端 box-shadow 为什么经常不显示或发虚？
根本原因不是 CSS 写错了，而是移动浏览器（尤其 iOS Safari）对 box-shadow 的渲染做了硬件加速限制：当元素没有触发合成层（compositing layer）时，阴影可能被裁剪、模糊甚至完全不绘制。常见表现是阴影在 iPhone 上“消失”，或安卓 WebView 中边缘锯齿严重。
- 确保父容器没有
overflow: hidden（它会剪掉阴影） - 给带阴影的元素加
transform: translateZ(0)或will-change: transform，强制创建独立合成层 - 避免对
position: fixed元素直接加阴影——它可能被视口裁剪，建议包一层相对定位容器
怎么写一个真正轻量又清晰的移动端阴影？
别用 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 这种桌面端惯用写法。移动端高 DPI 屏幕下，过大的 blur-radius（如 12px）会被放大渲染，导致发灰、失真。
- 把
blur-radius控制在4px以内（推荐2px～4px） -
spread-radius尽量为0，避免阴影扩散不可控 - 用更透明的黑：比如
rgba(0,0,0,0.08)而非0.15，视觉更干净 - 示例：
box-shadow: 0 2px 4px rgba(0,0,0,0.08)
iOS Safari 下阴影偶尔“闪一下”怎么办？
这是 Safari 对 box-shadow 的 repaint 优化导致的：滚动或动画中，阴影可能延迟绘制一帧，造成闪烁感。这不是 bug，是渲染策略。
- 给元素加
-webkit-transform: translateZ(0)（比translate3d更轻） - 如果元素本身有
transition，确保过渡属性只包含transform和opacity，避开box-shadow自身参与过渡 - 极端情况可改用伪元素 +
filter: drop-shadow()，但注意drop-shadow不支持内阴影且性能略低
要不要用 filter: drop-shadow() 替代 box-shadow？
仅在需要非矩形投影（如带圆角、clip-path 的元素）时才考虑。它基于图像滤镜，能跟随形状，但代价明显：
立即学习“前端免费学习笔记（深入）”；
- 不支持
inset内阴影 - 无法设置多层阴影（
box-shadow可逗号分隔多组） - 某些低端安卓机型上会有明显掉帧，尤其配合滚动时
- 若只是卡片、按钮等标准矩形组件，坚持用优化后的
box-shadow更稳
真正容易被忽略的是：阴影是否“必要”。很多所谓“层级感”其实靠间距、背景色差和字体粗细就能传达，加阴影前先问一句——这个阴影解决了什么具体问题？
