Safari将#FF6B6B解析为Display P3导致偏粉，Chrome按sRGB渲染更橙；需用rgb(255 107 107)锁色域、加padding或伪元素防裁剪、禁用伪透明触发合成层，并注意Tailwind阴影语法兼容性。
直接结论：不是阴影写错了，是 Safari 把 #FF6B6B 当 Display P3 解析、Chrome 坚守 sRGB；同时 Safari 对 box-shadow 的裁剪更激进、合成层更敏感——必须分色彩、裁剪、图层三处动手，缺一不可。
用 rgb() 或 color(srgb) 锁死色域（解决颜色偏暖/发灰）
Safari（尤其 macOS/iOS 广色域设备）默认将 HEX 和 hsl() 映射到 Display P3，Chrome/Firefox 默认走 sRGB，同一 #FF6B6B 在 Safari 里更粉、Chrome 更橙。这不是 bug，是规范允许的渲染差异。
-
rgb(255 107 107)是最简方案：现代空格语法强制锚定 sRGB，Safari 16.4+ / Chrome 111+ / Firefox 117+ 全支持；旧版 Safari 直接忽略，退回到 HEX fallback - 必须带 fallback：
box-shadow: 0 2px 4px #FF6B6B; box-shadow: 0 2px 4px rgb(255 107 107);——第二行不能省，也不能写成rgb(255,107,107)（逗号语法无色域锁定能力） - 别用
hsl()或hsla()直接进box-shadow：旧版 Safari 解析不稳定，且不保证色域 -
currentColor在box-shadow中只读取元素自身的color值，和背景无关；transparent等价于rgba(0,0,0,0)，阴影不可见但热区丢失，Safari 下易导致backdrop-filter失效
加 padding 或换伪元素防裁剪（解决阴影被 overflow: hidden 切掉）
Safari 对 overflow: hidden 的裁剪边界极其严格：只要阴影落点超出 content box，就静默丢弃——不是画错，是根本没画。很多人加了 padding 没用，是因为父容器已隐式创建新层叠上下文（比如带 transform 或 will-change）。
-
padding值至少取blur-radius + abs(offset-y)的较大值，例如box-shadow: 0 4px 12px rgba(0,0,0,0.15)，建议padding: 16px - 必须同步设
box-sizing: border-box，否则width: 100%会撑破容器 - 若父容器有
transform、opacity或will-change，padding很可能失效——此时改用伪元素更稳：::before绝对定位 +inset: 0+transform: translateZ(0)承载阴影 - 避免在
flex/griditem 上直接加box-shadow：它可能干扰轨道计算；优先用align-items: start+min-height腾空间
禁用触发合成层的“伪透明”写法（解决文字发虚、sticky 失效）
Safari 对 transform、opacity、filter 触发合成层更敏感。一旦文字进入 GPU 图层，亚像素渲染失效，边缘立刻发虚；position: sticky 在嵌套滚动中也常因图层提升失败。
立即学习“前端免费学习笔记（深入）”；
- 删掉
opacity: 0.99这类“伪全透明”，改用opacity: 1或visibility: hidden - 删掉
filter: blur(0)、filter: brightness(1)——它们无意义却强制升层 -
drop-shadow()在 Safari 里垂直方向易消失：当元素通过transform: translateY(-Xpx)移出父容器可视区域时，哪怕阴影本身在视口内，也会被提前裁掉；可临时改用transform: translateX(-100px) rotateY(0.001deg)强制新建图层 - 给
sticky外层加isolation: isolate，能稳定其图层归属；同时确保父容器未设overflow: hidden或clip-path
Tailwind 用户注意 shadow-[] 的 Safari 陷阱
Tailwind 的任意值阴影在 Safari 15.4 之前版本解析极严：省略参数、多层逗号、负 spread-radius 都会导致整条声明被丢弃，看起来像“没生效”。
-
inset必须显式写出spread-radius：错误写法shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]→ 正确写法shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)] - 禁用多层逗号分隔：
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 版本因层叠上下文缺失而“吞掉”内阴影 - 移动端慎用大
blur-radius：shadow-xl在 iPhone 上常糊成灰雾，推荐shadow-md或自定义shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]
真正麻烦的从来不是某一条规则写错，而是多个点叠加：比如一个用了 color(srgb) 的按钮，又带 backdrop-filter，还设了 border: 1px solid transparent——Safari 会同时在色彩、合成、语义三层上出问题，单点修复无效。得从渲染机制出发，一层一层切开看。
