框影颜色函数中CSS自定义属性在Safari中呈现错误

Question

这是Safari的错误还是我做错了什么？

查看这个Safari和Firefox的CodePen：https://codepen.io/mattaningram/pen/zWVxzR

或者在下面运行代码段：

​

.item {
  --itemColor: 200, 0, 0;
  --itemColorHex: #C80000;
  
  width: 50vw;
  height: 50vh;
  
  background-color: rgba( var(--itemColor), 1 );
  
  -webkit-box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
  box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
  /* box-shadow: 0 0 15px 10px var(--itemColorHex); THIS WORKS */
  /* color: rgba( var(--itemColor), .5 ); BOX-SHADOW INHERITS THIS PROPERLY IF UNCOMMENTED */
}

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
  <div class="item"></div>
</div>

​

在Safari中，框影呈现为黑色(应该是红色)，没有alpha。如果您不使用rgba (请参阅注释掉box-shadow行)，这是可行的。

奇怪的是，Safari检查元素识别CSS调用，并能够识别CSS自定义属性值：

​

​

更奇怪的是，如果您将项的color (文本颜色)属性设置为自定义属性，则框影继承它，并且它可以工作(遗憾的是，在我的实际实现中，我需要多个框影，因此这不会解决我的问题)。

Answer 1

这是一个Safari错误：bug.cgi?id=185940

使自定义属性在框影中工作的唯一方法是将整个颜色放入变量中。

.item {
  --color: rgba(200, 0, 0, 0.5);
  box-shadow: 0 0 10px var(--color);
}

编辑:看来它是修复自Safari 13.0.3

Answer 2

这可能是一个“-webkit-框-阴影”类型的东西。

请参阅https://css-tricks.com/almanac/properties/b/box-shadow/