如何解决Safari中box-shadow显示效果与其他浏览器不一致的问题？

问题根源 #

Safari 对无尺寸（或尺寸为0）元素的 box-shadow 渲染逻辑与Chromium/Firefox存在差异：

• 它会将阴影的基础载体视为方形，导致阴影边角偏方正
• 对RGB颜色的色彩饱和度计算有区别，导致阴影颜色偏淡

解决方案 #

方案1：给元素添加圆形载体属性 #

给空div设置明确的圆形基础样式，让阴影基于圆形载体渲染，从根源上解决形状差异：

.your-div {
  width: 0;
  height: 0;
  border-radius: 50%; /* 关键：将元素设为圆形，阴影会以此为基础扩散 */
  box-shadow: 20px 20px 40px 32.5px rgb(241, 238, 243),
              20px 20px 55px 50px rgb(218, 44, 204);
}

方案2：调整颜色适配Safari色彩表现 #

针对Safari的色彩饱和度差异，可改用HSL色彩模式（色彩表现更跨浏览器一致），或微调RGB值：

/* 改用HSL色彩，减少浏览器色彩解析差异 */
box-shadow: 20px 20px 40px 32.5px hsl(280, 25%, 95%),
            20px 20px 55px 50px hsl(305, 76%, 51%);

如果仍有饱和度偏差，可给Safari单独添加饱和度滤镜：

/* 仅针对Safari生效的样式 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .your-div {
      filter: saturate(1.2); /* 按需调整饱和度数值，匹配其他浏览器效果 */
    }
  }
}

方案3：用伪元素替代box-shadow（最稳定） #

如果上述方案仍有细微差异，可通过伪元素创建独立的圆形阴影层，完全规避浏览器渲染差异：

.your-div {
  position: relative;
  width: 0;
  height: 0;
}

.your-div::before,
.your-div::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

/* 模拟第一个阴影 */
.your-div::before {
  width: 65px; /* 等于2倍spread radius：32.5*2 */
  height: 65px;
  left: 20px;
  top: 20px;
  background: rgb(241, 238, 243);
  filter: blur(40px);
}

/* 模拟第二个阴影 */
.your-div::after {
  width: 100px; /* 等于2倍spread radius：50*2 */
  height: 100px;
  left: 20px;
  top: 20px;
  background: rgb(218, 44, 204);
  filter: blur(55px);
}

这种方式通过明确的圆形元素+模糊滤镜实现阴影效果，所有浏览器表现完全一致。

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