CSS在Safari中无法生效但Chrome正常，请问原因是什么？

你的box-shadow在Safari里失效，核心问题是颜色语法的兼容性：

你用的是CSS Color Module Level 4新增的空格分隔RGB语法（比如rgb(0 0 0 / 20%)），这种写法Chrome已经支持，但Safari（尤其是版本15.4之前的旧版本）并不兼容。

Safari只支持传统的逗号分隔RGB/RGBA语法，比如：

• rgba(0, 0, 0, 0.2)
• rgb(0, 0, 0, 0.2)（部分新版本支持，但rgba兼容性更广泛）

把你的box-shadow代码改成兼容写法就能解决问题，修改后的代码如下：

.header {
  height: 100px;
  width: 200px;
  box-shadow: 
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0 rgba(0, 0, 0, 0.14),
    0px 1px 10px 0 rgba(0, 0, 0, 0.12);
}

<div class="header"></div>

内容的提问来源于stack exchange，提问作者Android18