Safari 旧版阴影问题源于其对 box-shadow 的解析限制，需显式声明 spread-radius、避免多层 inset、禁用 overflow:hidden 等父级裁剪属性，并优先使用 theme 配置而非任意值语法。
Tailwind CSS 的阴影在 Safari（尤其是 15.4 之前版本）里不显示、显示为外阴影、边缘断裂或发灰，不是你写错了类名，而是 Safari 对 box-shadow 的解析和渲染有明确限制——绕过这些限制比“调参”更有效。
为什么 inset 内阴影在 Safari 里完全不生效
Safari 旧版对 inset 关键字的语法解析不完整，遇到省略 spread-radius 或多层逗号分隔时会直接丢弃整条声明。
- 错误写法：
shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]——spread-radius缺失，Safari 可能忽略inset - 正确写法：
shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]—— 显式写出0作为spread-radius - 避免多层：
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.08)]在 Safari 15.4 以下大概率失效 - 必须配背景：元素无
background-color或border时，某些 Safari 版本因层叠上下文缺失而“吞掉”内阴影
为什么 shadow-lg 或自定义 shadow-[] 在 Safari 里变黑边或糊成一团
根本原因是 Safari 对负 spread-radius 和大 blur-radius 的组合处理不稳定，尤其在 iOS 上会强制降级为硬边投影或裁剪扩散区域。
- 黑边常见于：
shadow-[0_4px_8px_-2px_rgba(0,0,0,0.15)]—— 负 spread + 中等模糊，在 Safari 中易触发边缘渲染异常 - 安全替代：
shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]（spread-radius固定为0，靠blur-radius控制柔和度） - 移动端尤其注意：iOS Safari 对 >4px 的
blur-radius渲染极差，shadow-xl在 iPhone 上常变成灰雾，不是配置错，是浏览器限制 - 加
[-webkit-transform:translateZ(0)]强制合成层，可缓解部分裁剪和闪烁问题
父容器导致阴影“消失”的隐蔽原因
即使 box-shadow 值完全合法，Safari 仍可能因父级 CSS 属性意外裁剪阴影——这不是 bug，是渲染层叠加规则的副作用。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden是头号杀手：它会直接裁掉inset阴影的扩散区域，连 DevTools 的 computed 样式都显示正常，但就是看不见 -
clip-path或transform（哪怕只是translateZ(0)）在某些 Safari 版本中会破坏inset阴影的绘制层级 - 验证方法：给目标元素加
relative z-10，若阴影恢复，说明是层叠上下文缺失；加bg-white看是否与父背景融合导致视觉丢失 - 别用
filter: drop-shadow()替代：它根本不支持inset，且在 Safari 中边缘锯齿严重
自定义阴影在 Safari 中不生成类名或报错
Tailwind 的 shadow-[] 任意值语法依赖 JIT 编译器实时解析，Safari 旧版对复杂值（如含多个 rgba()、inset 和逗号）支持脆弱，容易静默失败。
- 确保
tailwind.config.js中content正确扫描到使用该类的文件，否则任意值不会被生成 - 避免在值里写注释、换行或引号，例如：
'inner':'inset 0 2px 4px 0 rgba(0,0,0,0.1)'✅，'inner':"inset 0 2px 4px 0 rgba(0,0,0,0.1)"❌（双引号） - 高频使用的内阴影，优先走
theme.extend.boxShadow配置，而非shadow-[]，兼容性更稳 - 深色模式下自定义阴影不会自动适配，
dark:shadow-inner不生效，需手动配置暗色版本
最常被忽略的是：Safari 对 inset 阴影的渲染依赖完整的层叠上下文和父容器的“宽容”属性，而不是单纯调参数。写对了 box-shadow 字符串，只是第一步。
