这是 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 会继承它并且它有效(遗憾的是在我的实际实现中我需要多个框-shadows 所以这不能解决我的问题)。
最佳答案
我有一个解决你的问题的方法,如果你只是在盒子阴影中添加可变颜色,那么它就不会在 Safari 浏览器中工作。但是,通过在代码中进行一些操作,您可以轻松完成。
这里有几个步骤要做..
选择 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 中呈现不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49837858/