移动端box-shadow滚动时变淡或消失是因iOS Safari等浏览器主动降级渲染，需加will-change: transform启用硬件加速，避免与filter: blur()冲突，统一用rgba整数参数并显式声明transition。
移动端 box-shadow 为什么一滚动就变淡或消失
不是代码写错了，是 iOS Safari 和部分安卓 WebView 主动降级渲染质量——尤其当卡片用了 transform、position: fixed 或在快速滚动容器里时，阴影会被“吃掉”。它不报错，只是视觉上突然发灰、变薄甚至完全不可见。
必须加 will-change: transform 强制启用硬件加速，但别滥用：只加在真正需要悬浮动画的卡片上，否则可能引发内存泄漏。同时避免和 filter: blur() 同时用在一个元素上，后者会覆盖阴影。
- 检查是否误写了
filter: blur(1px)或backdrop-filter—— 它们和box-shadow渲染通道冲突 - 统一用
rgba(0,0,0,0.08)这类明确 alpha 的写法，别用hsla()或透明度为 0 的黑，旧版 UC 内核不认 - 如果卡片嵌套在
overflow: scroll容器中，确保父容器没触发新层叠上下文（比如没意外加opacity: 0.99）
box-shadow 参数怎么配才不糊、不飘、不跳变
高 DPI 屏（iPhone Retina、旗舰安卓）对亚像素敏感：box-shadow: 0 0.5px 2px rgba(0,0,0,0.1) 这种写法在 Safari 下容易模糊抖动；而 blur-radius 小于 2px 在 Retina 屏上几乎不可见。
实操底线：
立即学习“前端免费学习笔记（深入）”；
- 所有数值用整数：
1px、4px、12px，避开0.5px、1.2px - 浅色背景用
rgba(0,0,0,0.08)，深色背景改用rgba(255,255,255,0.06)，别硬套 Bootstrap 的0.15 - 微浮起（2–4px）：用
0 2px 6px -2px rgba(0,0,0,0.08)，负spread-radius收紧边缘 - 明显抬升（12px+）：必须双层，如
0 4px 6px -2px rgba(0,0,0,0.1), 0 12px 24px -4px rgba(0,0,0,0.08)，第一层模拟接触投影，第二层模拟环境光扩散
hover 动效为啥移出时“啪”地跳回
因为 transition 没写在默认状态里。很多人只写 .card:hover { transition: box-shadow 0.25s; }，结果鼠标移入有动画，移出直接跳变——浏览器默认“立刻还原”，它根本不知道该平滑过渡回去。
正确写法必须把 transition 放在基础样式中：
.card {
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover,
.card.is-hovered {
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
- 别用
transition: all 0.25s，它会连background-color一起过渡，触发重排 - 初始态和悬停态的
box-shadow值维度要一致（都用 4 值写法），别一个写0 4px 12px rgba()，另一个写0 4px 12px 0 rgba() - 移动端必须用
.is-hovered类 + JS 监听touchstart，纯:hover在 iOS Safari 上只生效一次
圆角卡片阴影为啥四个角“溢出”或边缘发虚
box-shadow 默认按元素原始矩形区域绘制，不受 border-radius 裁剪——这不是 bug，是规范行为。所以圆角卡片加阴影后，四个角容易出现生硬的“阴影尾巴”或边缘虚化不一致。
别用 overflow: hidden 粗暴裁剪，它可能意外切掉绝对定位子元素（比如角标 .badge）。
- 更稳妥的做法是
clip-path: border-box（现代浏览器支持良好） - 退而求其次用
clip-path: inset(0) - 如果卡片本身有
border，建议去掉；若必须保留，border-width≤1px，颜色用rgba(0,0,0,0.05)，否则会和阴影混成一块 - 内外阴影叠加时，alpha 值不能相同：外阴影用
0.1，内阴影用inset 0 1px 2px rgba(0,0,0,0.05)，错开才不发闷
transform 或 opacity），子元素的 box-shadow 就只能在该上下文内渲染，无法穿透到外层——你看到的“阴影变短”，其实是被截断了。** 
