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 渲染层叠加规则的副作用。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
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 私有渲染层的视觉层。
- 必须先用
-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 层级。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
