框阴影颜色函数中的CSS自定义属性在Safari中渲染不正确

Question

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

在Safari与Chrome和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中，box-shadow呈现为黑色（应为红色），没有alpha。如果您不使用rgba，请执行此操作（请参阅已注释掉的box-shadow行）。

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

更奇怪的是，如果你将项目的color（文本颜色）属性设置为自定义属性，则box-shadow继承它并且它可以工作（遗憾的是在我的实际实现中我需要多个盒子阴影所以这不能解决我的问题。）

Answer 1

我已经解决了您的问题，如果您只是在框阴影中添加可变颜色，那么它将无法在Safari浏览器中使用。但是，通过在代码中进行一些操作，您可以轻松实现。

这里有几个步骤要做。.

1. 选择RGB值中的任何根色。

   :root {
        --color: 130, 16, 253;
    }
   

2. 添加相同的颜色，但对于框阴影的根有些不透明。这是您在另一个-shadowColor 变量中使用一个变量的技巧。

   :root {
       --color: 130, 16, 253;
       --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
   }
   

3. 将颜色和框阴影应用于任何对象。

   .feature_box
   {   
       color: rgba(var(--color), 1);
       -webkit-box-shadow: var(--shadowColor);
       box-shadow: var(--shadowColor);
   }
   

   享受：）

Answer 2

这是一个Safari错误：https://bugs.webkit.org/show_bug.cgi?id=185940

使自定义属性在box-shadow中工作的唯一方法是将所有颜色放入变量

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

Answer 3

这可能是＆＃34; -webkit-box-shadow＆＃34;打字。

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