根本原因是box-shadow中HEX颜色被不同浏览器解析到不同色彩空间：Safari倾向Display P3，Chrome/Firefox默认sRGB；统一用rgb(255 107 107)显式锚定sRGB可解决。
box-shadow 颜色在不同浏览器中不一致，根本原因不是语法写错了，而是**颜色值被解析到不同色彩空间**，尤其在渐变、深色背景或高对比场景下会放大差异。
box-shadow 里的 HEX 颜色会被 Safari 当作 Display P3 解析
Chrome（Blink）和 Firefox（Gecko）默认把 #FF6B6B 这类十六进制值当作 sRGB 处理；但 Safari（WebKit），尤其是 macOS/iOS 系统启用广色域时，会优先尝试映射到 Display P3 色域——同一 HEX 值在 P3 下的物理色坐标与 sRGB 不同，导致阴影渲染偏暖、偏亮。
- 临时验证：把
box-shadow: 0 2px 4px #FF6B6B;改成box-shadow: 0 2px 4px rgb(255 107 107);，Safari 颜色立刻“变冷”更接近 Chrome - rgb() 空格语法（
rgb(255 107 107)）是现代标准，强制走 sRGB 渲染管线，IE 不支持但已无需兼容 - 避免用
hsl()或hsla()直接写进box-shadow—— 某些旧版 Safari 对 hsl 解析不稳定，且不保证色域锚定
rgba() 的 alpha 在各浏览器中渲染逻辑一致，但叠加效果受抗锯齿影响
rgba(0,0,0,0.1) 本身不会跨浏览器变色，但最终视觉明暗可能不同：Firefox 默认开启 subpixel AA，Chrome 启用 LCD 模式，Safari 在 Retina 屏上做额外 gamma 校正。这会让相同 alpha 值在边缘过渡处呈现细微软硬差异。
- 别靠调 alpha “修颜色”，先统一基础色空间（用
rgb()），再微调 alpha - 深色背景下慎用
rgba(255,255,255,0.1)：Safari 可能因 gamma 补偿显得过亮，改用hsla(0,0%,100%,0.08)更稳 - 多层阴影叠加时，不要假设 alpha 可线性累加——
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05)在 Safari 里视觉浓度 ≈ 0.09，在 Chrome ≈ 0.095，差异虽小但可测
currentColor 在 box-shadow 中根本不读取 background-color
很多人写 box-shadow: 0 2px 4px currentColor; 以为能自动匹配背景色，结果阴影还是黑的——因为 currentColor 只继承元素自身的 color 属性值，和 background-color 完全无关。Safari 和 Firefox 对该行为的处理完全一致，但误解会导致“以为是兼容问题”。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 正确做法：用 CSS 自定义属性同步颜色，例如
--shadow-color: hsla(0,0%,20%,0.12);，然后box-shadow: 0 2px 4px var(--shadow-color); - 如果背景是渐变或图片，
currentColor更不可靠——它连单色都继承不了，何况复杂背景 - 别用
transparent当占位符：box-shadow: 0 2px 4px transparent;等价于rgba(0,0,0,0)，阴影存在但不可见，调试时极易误判为“没生效”
IE8–IE9 的 filter 阴影根本不是颜色问题，而是无 color 通道
IE8 不支持 box-shadow，IE9 仅支持无前缀语法但不支持 rgba() 或 inset。此时回退到 filter: progid:DXImageTransform.Microsoft.Shadow(...)，它压根没有 color 参数——只接受十六进制 Color='#000'，且内部按 GDI 位图方式合成，不经过任何色彩空间转换。
立即学习“前端免费学习笔记（深入）”；
- 这意味着：哪怕你给其他浏览器写了
rgb(99 102 241)，IE8–IE9 里只能是纯灰阶黑影，无法还原色相 -
Direction=135和Strength=4控制的是硬边投影角度和长度，不是模糊，也不响应 alpha - 若项目仍需兼容 IE，阴影颜色必须降级为单色方案，且不能依赖透明度表达层次——这是能力边界，不是 bug
rgb() 或 hsl() 显式声明，再配合合理 alpha 和模糊组合，跨浏览器差异就缩到人眼难辨的程度。 
