inset阴影在iOS Safari中不显示或变外阴影，是因Safari（尤其15.4前）解析inset语法不完整，需显式写出spread-radius（如0）、避免多层逗号分隔、确保背景色及排除父级overflow:hidden等裁剪干扰。

为什么inset阴影在iOS Safari里不显示或变成外阴影

根本不是你写错了box-shadow，而是 Safari（尤其 15.4 之前版本）对 inset 关键字的语法解析不完整。它会直接丢弃整条声明，或者把 inset 0 2px 4px rgba(0,0,0,0.1) 当成普通外阴影渲染——因为漏写了第四个长度值 spread-radius。

• inset 必须写在所有偏移和模糊值前面，不能加引号，也不能写成 inner 或 in-set
• 必须显式写出 spread-radius，哪怕为 0：正确写法是 inset 0 2px 4px 0 rgba(0,0,0,0.1)
• 避免逗号分隔多层阴影，比如 inset 0 1px ... , 0 2px ...，旧版 Safari 基本不认
• 确保元素有明确的 background-color 或 border，否则某些 iOS 版本因层叠上下文缺失而“吞掉”内阴影

父容器导致inset阴影消失的隐蔽原因

即使 box-shadow 值完全合法，阴影也可能凭空消失——这不是 bug，是 Safari 渲染层叠加规则的副作用。

• overflow: hidden 是头号杀手：它会裁掉 inset 阴影的扩散区域，DevTools 里样式一切正常，但就是看不见
• clip-path 或 transform（哪怕只是 translateZ(0)）在部分 Safari 版本中会破坏绘制层级
• 验证方法：给目标元素加 position: relative; z-index: 10，若阴影恢复，说明是层叠上下文缺失；加 background: white 看是否与父背景融合导致视觉丢失

input/textarea里加inset阴影没反应怎么办

原生表单控件默认走 UA 样式路径，box-shadow 被系统样式覆盖，尤其在 iOS 上，“内阴影”根本不是 CSS 控制的，而是 WebKit 私有渲染层的视觉层。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 必须先用 -webkit-appearance: none 卸载原生皮肤（只写 appearance: none 在 iOS 15.4 前无效）
• 同步清除 outline: none，否则聚焦高亮环会干扰阴影判断
• background-color: transparent 和 border: 1px solid transparent 缺一不可，否则残留浅灰底 + 内阴影组合，误判为阴影未清
• 对于 textarea，iOS 15 前版本有渲染延迟，可加 transform: translateZ(0) 强制硬件加速

blur-radius 和 spread-radius 的安全取值范围

iOS Safari 对负值和大模糊值极其敏感，稍不注意就退回到硬边投影或直接失效。

立即学习“前端免费学习笔记（深入）”；

• 避免负 spread-radius：Safari 15.4 以下遇到 inset 0 0 8px -2px 常退化为外阴影
• 推荐固定 spread-radius 为 0，靠 blur-radius 控制柔和度，例如 inset 0 0 6px 0 #00000020
• 移动端建议 blur-radius ≤ 4px，超过后在 iPhone 上易变灰雾、边缘断裂
• 圆角容器上用 inset 阴影时，blur-radius 超过 border-radius 的一半就容易溢出视觉边界

实际调试中最容易被忽略的是：你写的 inset 可能压根没进 Safari 的解析器，而你以为是样式优先级或 DOM 结构问题——先检查那四个长度值是否齐全，再查父级 overflow 和 z-index 层级。