Safari中box-shadow使用CSS自定义属性渲染异常，是否为浏览器Bug？

这其实是Safari早期版本的兼容性限制，并不是你的操作有误哦～

问题根源 #

在Chrome和Firefox这类现代浏览器中，CSS标准允许将自定义属性（变量）直接传入rgba()函数作为颜色分量，比如rgba(var(--itemColor), .5)这种写法能被正确解析。但早期Safari版本（包括部分桌面和移动端的旧版Safari）对这种语法的支持不完善，无法识别rgba()内部的自定义变量，导致box-shadow无法正常渲染。

而你注释掉的box-shadow: 0 0 15px 10px var(--itemColorHex);写法能生效，是因为这个变量本身是完整的十六进制颜色值，浏览器不需要拆分解析颜色分量，所以兼容性更好。

验证与解决办法 #

1. 先确认Safari版本 #

如果你的Safari版本在15.4之前，大概率会遇到这个问题；15.4及之后的Safari已经修复了该兼容性Bug，支持rgba(var(--var), alpha)的标准写法。

2. 兼容旧版Safari的解决方案 #

根据你的需求，推荐几种可行的写法：

方案一：直接定义带透明度的完整rgba变量

提前把包含透明度的颜色值定义成变量，避免在rgba()内拆分使用：

.item {
  --itemSolidColor: rgba(200, 0, 0, 1);
  --itemShadowColor: rgba(200, 0, 0, .5);
  width: 50vw;
  height: 50vh;
  background-color: var(--itemSolidColor);
  box-shadow: 0 0 15px 10px var(--itemShadowColor);
}

方案二：添加降级写法（兼顾新旧浏览器）

保留十六进制变量的写法作为旧版Safari的降级，同时添加标准写法适配现代浏览器：

.item {
  --itemColor: 200, 0, 0;
  --itemColorHex: #C80000;
  width: 50vw;
  height: 50vh;
  background-color: rgba(var(--itemColor), 1);
  /* 旧版Safari降级用 */
  box-shadow: 0 0 15px 10px var(--itemColorHex);
  /* 现代浏览器优先使用这个 */
  box-shadow: 0 0 15px 10px rgba(var(--itemColor), .5);
}

方案三：使用CSS color-mix函数（适用于较新浏览器）

如果目标浏览器支持color-mix（Safari 15.4+也支持），可以用混合颜色与透明色的方式实现：

.item {
  --itemColor: rgb(200, 0, 0);
  width: 50vw;
  height: 50vh;
  background-color: var(--itemColor);
  box-shadow: 0 0 15px 10px color-mix(in srgb, var(--itemColor), transparent 50%);
}

总结一下：这个现象是Safari历史版本的兼容性Bug，和你的操作无关，通过调整自定义属性的定义方式或者添加降级写法就能解决啦。

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