移动端 box-shadow 失效或不明显主因是浏览器快速滚动优化降级渲染，尤其在 transform 或 fixed 定位时；需用 will-change: transform 启用硬件加速，避免与 filter: blur() 冲突，统一 rgba 透明色、显式声明过渡属性、保持阴影参数维度一致、合理设置层叠上下文及 OLED 屏适配值。
box-shadow 在移动端失效或不明显？
多数情况不是代码写错了，而是被移动端默认的“快速滚动优化”吃掉了阴影渲染。iOS Safari 和部分安卓 WebView 会主动降级 box-shadow 的绘制质量，尤其在元素有 transform 或 position: fixed 时更明显。
- 加
will-change: transform强制开启硬件加速（但别滥用，可能引发内存泄漏） - 避免对同一元素同时设置
box-shadow和大范围filter: blur()，后者会覆盖前者 - 用
rgba(0,0,0,0.15)替代hsla()或透明度为 0 的黑，某些旧版 UC 内核不认 hsla 里的 alpha
卡片悬浮时投影突然跳变？
这是 hover 状态切换时，box-shadow 的模糊半径和偏移量没做平滑过渡导致的视觉抖动。浏览器不会自动补全中间帧，必须显式声明所有参与动画的属性。
- 过渡必须包含全部四个参数：
box-shadow 0.2s ease-out，不能只写all 0.2s - 初始态和悬停态的
box-shadow值维度要一致——比如都用 4 值写法：0 4px 12px rgba(0,0,0,0.1)，别一个写 3 值、一个写 5 值 - 如果卡片本身有
border-radius，阴影边缘会随圆角裁切，此时增大blur-radius要同步微调spread-radius，否则悬停时阴影“撑开感”过强
多层卡片堆叠时阴影互相遮挡？
CSS 层叠上下文（stacking context）会截断阴影渲染，父容器一旦触发新层叠上下文（比如设置了 opacity、transform、filter），子元素的 box-shadow 就只能在该上下文内显示，无法穿透到外层。
- 检查父容器是否意外带了
opacity: 0.99或transform: translateZ(0)—— 这些都会创建新层叠上下文 - 若需真实叠放效果，把卡片提一层 DOM，让它们同级并列，靠
z-index控制顺序，而非嵌套 - 阴影颜色别用纯黑
#000，移动端 OLED 屏幕下容易发灰，推荐rgba(0,0,0,0.12)起步，再按需加深
微信内置浏览器里阴影锯齿严重？
微信 X5 内核对 subpixel 渲染支持弱，尤其是小尺寸模糊（blur-radius ≤ 4px）时，阴影边缘容易出现明显像素块。
立即学习“前端免费学习笔记（深入）”；
- 把
blur-radius提到至少6px，配合稍大的offset-y（如4px），反而比2px模糊更顺滑 - 避免在
@media (max-width: 375px)下直接缩放整个卡片，应单独调整box-shadow参数，例如：缩小偏移量但保持模糊值不变 - 真机调试时注意：X5 的 DevTools 不反映真实渲染，务必连真机用 Chrome Remote Debug 查看实际效果
filter: opacity(0.99)。 
