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 检查元素识别 CSS 调用并且能够识别 CSS 自定义属性值：

更奇怪的是，如果您将项目的 color（文本颜色）属性设置为自定义属性，那么 box-shadow 会继承它并且有效（遗憾的是我的实际实现需要多个框阴影，所以这不能解决我的问题）。

Answer 1

这可能是“-webkit-box-shadow”类型的东西。

见https://css-tricks.com/almanac/properties/b/box-shadow/

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);
}

编辑：从 Safari 13.0.3 开始似乎已修复

Answer 3

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

这里有几个步骤要做..

Select RGB 值中的任何根颜色。
```
:root {
     --color: 130, 16, 253;
 }
```
为 box shadow 添加相同的颜色但带有一些不透明度。这是您在另一个 --shadowColor 变量中使用一个 variable 的技巧。
```
:root {
    --color: 130, 16, 253;
    --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
}
```

对任何对象应用颜色和框阴影。

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

享受:)

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

CSS custom properties in box-shadow color function render incorrectly in Safari

css

safari

box-shadow

css-variables