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

这是一个狩猎迷还是我做错了什么

在Safari vs Chrome和Firefox中查看此代码笔：

或运行下面的代码段：

.item{
--itemColor:200,0,0；
--itemColorHex:#C80000；
宽度：50vw；
高度：50vh；
背景色：rgba（var（--itemColor），1）；
-webkit盒阴影：0 0 15px 10px rgba（var（--itemColor），.5）；
框阴影：0 0 15px 10px rgba（var（--itemColor），.5）；
/*框阴影：0 0 15px 10px变量（--itemColorHex）；这可以工作*/
/*颜色：rgba（var（--itemColor），.5）；如果未注释，则BOX-SHADOW将正确继承该颜色*/
}
.包装纸{
高度：100vh；
宽度：100vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

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

请参见

这是一个Safari bug：

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

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

---

编辑：自Safari 13.0.3以来，它似乎已被修复。我已经为您的问题找到了一个解决方案，如果您只是在框阴影中添加可变颜色，那么它在Safari浏览器中将无法工作。然而，通过在代码中进行一些操作，您可以很容易地做到这一点

这里有几个步骤要做

选择RGB值中的任何根颜色

:root { --color: 130, 16, 253; } ：根{ --颜色：130、16253； }

为“长方体阴影”的根添加相同的颜色，但具有一定的不透明度。这里有一个技巧，您可以在另一个变量中使用一个变量——shadowColor变量

:root { --color: 130, 16, 253; --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08); } ：根{ --颜色：130、16253； --阴影颜色：0px 10px 50px 0px rgba（var（--颜色），0.08）； }

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

.feature_box { color: rgba(var(--color), 1); -webkit-box-shadow: var(--shadowColor); box-shadow: var(--shadowColor); } .功能盒 { 颜色：rgba（var（--颜色），1）； -webkit盒阴影：var（--shadowColor）； 框阴影：var（--shadowColor）； } 享受：）

---

你能澄清一下吗？我在代码段中添加了

-webkit-box-shadow

行，代码笔打开了自动刷新器。仍然不起作用。只是认为这是一个供应商的css问题。这台计算机上没有Safari，所以我无法真正测试它。但是如果你只是把数字而不是功能放在样式上，我认为Safari就是不认识功能。但是，根据这个参考文献，它应该是。呵呵。我被难住了。我的假设是这也是一个狩猎bug，但是caniuse.com的“已知问题”部分没有提到它，所以我想我可能遗漏了什么。知道如何通知他们这个错误吗？这是一个合适的地方，但我会给别人一些时间来回答，至少在这样做之前：）祝你好运。谢谢！如果没有人找到解决方案，我一定会提交。嗯……Safari难道不认为透明值是黑色而不是白色吗？这有关系吗？哇，这很有效，对不起，我之前没看到这个！谢谢