iOS Safari 阴影“消失”或发虚，根本原因是 WebKit 对未触发合成层的元素裁剪或跳过渲染，需通过 transform: translateZ(0) 强制合成层、避免 overflow: hidden 与 border-radius 共存、确保背景色/边框及正确 box-shadow 语法来解决。
移动端 box-shadow 渲染不一致，不是 CSS 写错了，而是浏览器对合成层、DPR 缩放、语法解析和裁剪逻辑的处理差异导致的。直接调参数很难根治，得从渲染机制入手。
为什么 iOS Safari 阴影经常“消失”或发虚？
根本原因是 WebKit 对未触发合成层的元素，会裁剪或跳过 box-shadow 渲染——尤其当父容器有 overflow: hidden、clip-path 或子元素没独立图层时。
- 给带阴影的元素加
transform: translateZ(0)（比translate3d更轻），强制创建合成层 - 绝对避免父级同时设
border-radius和overflow: hidden，这是 iOS 上的“双重封印” - 验证是否被裁剪：临时加
position: relative; z-index: 10，若阴影恢复，说明是层叠上下文缺失 - 别用
filter: drop-shadow()替代——它不支持inset，且在低端安卓上掉帧明显
Tailwind 的 shadow-[] 在 Safari 里变黑边或不显示？
Safari（尤其是 15.4 之前）对 box-shadow 语法解析严格，省略参数或混用 inset 多层极易失效。
-
inset必须显式写出第四个值（spread-radius），例如：shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.08)]，不能省略0 - 禁用多层逗号分隔写法：
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.08)]在旧 Safari 中大概率被整条丢弃 - 避免负
spread-radius，比如-2px，Safari 可能退回到外阴影行为 - 确保元素有
background-color或border，否则某些 Safari 版本因层叠上下文缺失而“吞掉”内阴影
高 DPI 屏幕下阴影变浓、糊成一团？
不是颜色太深，是 blur-radius 和 spread-radius 被设备像素比（DPR）放大了——DPR=2 时，4px 实际按 8px 渲染。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 把
blur-radius控制在 ≤4px，推荐用2px或4px；spread-radius尽量为0，必须用则选偶数（如2px） - 透明度要降档：
rgba(0,0,0,0.08)在 DPR=2 下视觉浓度 ≈ DPR=1 下的0.12 - 别依赖
@media (min-resolution: 192dpi)动态改值——很多 WebView 不识别，更稳的是从一开始设计成 DPI 友好型 - 圆角 + 阴影组合时，约束条件是：
blur-radius + spread-radius ≤ border-radius × 0.8（DPR=1 下），否则高 DPR 必断
按钮点击态阴影在 Safari 里闪烁或不生效？
默认 button 的 -webkit-appearance: button 会干扰你写的 box-shadow，尤其在 :active 状态下叠加系统高光。
- 必须加
-webkit-appearance: none和appearance: none彻底清空默认样式 - 清空后手动补全
padding、border、background，否则按钮可能塌陷 - :active 和 :focus-visible 都要设相同阴影，避免鼠标/键盘用户反馈不一致
- 加
transition: box-shadow 0.1s ease，否则突兀跳变；且过渡属性只写transform和opacity，避开box-shadow自身参与过渡
真正容易被忽略的，是阴影是否真的需要——很多“层级感”靠间距、背景色差和字体粗细就能传达；加阴影前，先问一句：这个阴影解决了什么具体问题？
