Safari旧版box-shadow内阴影不显示，需显式写全四个长度值（含spread-radius为0），避免多层inset、负spread-radius及父级clip-path/transform干扰，filter: drop-shadow()不支持inset。
box-shadow在Safari里不显示内阴影？先检查inset是否被忽略
Safari（尤其是15.4之前版本）对box-shadow中inset关键字的解析有兼容性问题，常见表现是加了inset却渲染成外阴影，或完全不显示。这不是CSS写错了，而是Safari对box-shadow语法的早期实现不完整。
- 必须显式写出所有四个长度值（
offset-x offset-y blur-radius spread-radius），不能省略spread-radius为0时的值；比如box-shadow: inset 0 0 8px rgba(0,0,0,0.1)在旧Safari里可能失效，要写成box-shadow: inset 0 0 8px 0 rgba(0,0,0,0.1) - 避免混用
inset和多个阴影逗号分隔——Safari对多层inset支持不稳定，单层inset最稳妥 - 确保元素有明确的
background-color或border，否则某些Safari版本会因层叠上下文问题“吞掉”内阴影
为什么加了inset还是像外阴影？看清楚blur-radius和spread-radius的符号逻辑
很多人以为inset就等于“往里收”，其实Safari（尤其iOS 15/iPadOS 15）对负spread-radius的处理和Chrome不同：它可能直接丢弃整条声明。关键不是方向，是数值合法性。
-
blur-radius必须 ≥ 0，Safari不接受负值，即使其他浏览器能fallback -
spread-radius可以为负，但Safari 15.4以下版本遇到负值+inset组合时，常退回到默认外阴影行为 - 安全写法：把
spread-radius固定为0，靠blur-radius控制柔和度，例如box-shadow: inset 0 0 6px 0 #00000020
Safari 16+仍不显示？检查父容器是否触发了clip-path或transform隔离
即使语法正确，Safari也会因父级CSS属性意外裁剪inset阴影。这不是box-shadow本身的问题，而是渲染层叠加规则导致的视觉丢失。
- 如果父元素有
clip-path、overflow: hidden且子元素未触发新层叠上下文，inset阴影可能被裁掉 -
transform（哪怕只是translateZ(0)）在某些Safari版本中会破坏inset阴影的绘制层级 - 临时验证方式：给该元素加
position: relative; z-index: 1，看是否恢复——若恢复，说明是层叠上下文缺失
要不要用filter: drop-shadow()替代？别，它根本不支持inset
filter: drop-shadow()在Safari里渲染更稳定，但它只生成外阴影，没有inset等价物。强行用它模拟内阴影（比如翻转元素+阴影再翻转）会导致边缘锯齿、缩放失真，且无法响应伪元素内容变化。
立即学习“前端免费学习笔记（深入）”；
-
drop-shadow()的参数顺序和box-shadow不同，不接受inset，写了也无效 - 如果真需要兼容极老Safari（:before伪元素+绝对定位+
background渐变模拟内边效果，也不要妥协到filter - 现代项目（Safari 16+）优先修
box-shadow写法，而不是绕路——因为绕路方案在高DPI屏上更容易糊边
真正卡住的点往往不在box-shadow本身，而在它和overflow、transform、z-index三者的交互细节里。改完记得在真机iOS 15.6和macOS 13.3 Safari里各测一次，模拟器有时骗人。
