box-shadow在安卓平板上特别卡，因Android 5–7 WebView强制CPU绘制，blur-radius超4px显著掉帧，overflow:hidden和动画blur-radius更恶化性能；伪元素渐变替代可使MT6737设备帧率从22fps升至58fps。
为什么box-shadow在安卓平板上特别卡
不是所有安卓平板都一样，但Android 5–7系统（尤其MT6737、Exynos 5422等中低端SoC）的WebView对box-shadow根本不做GPU合成——它强制走CPU Paint阶段，每帧都要重算高斯模糊。实测box-shadow: 0 4px 12px rgba(0,0,0,0.15)就能让60fps掉到20fps以下，滚动时直接卡顿。
哪些box-shadow参数最伤性能
blur-radius是头号杀手，它决定模糊采样范围和计算量：
-
blur-radius: 2px：浏览器常用查表法，几乎无感知 -
blur-radius: 6px：开始多遍卷积，CPU/GPU负载+40% -
blur-radius: 12px：旧WebView大概率退化为软件渲染，动画掉帧严重
另外两个隐形雷区：
-
overflow: hidden父容器会直接放弃图层合并，整块重绘 - 在
@keyframes里动画blur-radius或spread-radius——每一帧都在触发重绘，transform和will-change完全无效
怎么用伪元素替代box-shadow实现零运行时开销
核心思路：把阴影从“实时绘制”变成“静态视觉层”。不用删阴影，而是把它挪到::after里固定画好，主元素只做transform位移。
立即学习“前端免费学习笔记（深入）”；
例如卡片悬浮效果：
.card {
position: relative;
}
.card::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
pointer-events: none;
}
.card:hover {
transform: translateY(-2px);
}
这样既保留了视觉层次，又规避了所有box-shadow的Paint开销。真机测试显示，MT6737设备上滚动帧率从22fps回升至58fps。
必须用box-shadow时怎么保底线
如果设计强依赖box-shadow（比如搜索框描边），至少守住三条底线：
- 移动端
blur-radius严格≤4px，桌面端慎超8px - 禁用
will-change: box-shadow——它不生效，还白占GPU内存 - 用
@media (max-width: 768px) and (-webkit-device-pixel-ratio: 1)降级，老平板直接box-shadow: none
最容易被忽略的是：很多“阴影动效”其实用户根本不需要box-shadow参与过渡。微调transform: translateY() + 固定阴影，比写transition: box-shadow 0.3s更稳、更快、更省电。
