代码之家 › 专栏 › 技术社区 › mattaningram

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

css-variables box-shadow safari css

10

mattaningram · 技术社区 · 7 年前

这是野生动物园的错误还是我做错了什么?

在Safari vs Chrome和Firefox中查看此代码笔: 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 inspect元素能够识别CSS调用,并且能够识别CSS自定义属性值:

Safari Inspect Element

更奇怪的是,如果你 color (文本颜色)属性转换为自定义属性框阴影继承了它,并且可以工作(遗憾的是,在我的实际实现中,我需要多个框阴影,所以这并不能解决我的问题)。

3 回复 | 直到 7 年前

1

8

gursewak sohi 7 年前

我已经为您的问题找到了一个解决方案,如果您只需在框阴影中添加可变颜色,那么它在Safari浏览器中将无法工作。然而,通过在代码中进行一些操作,您可以轻松地完成它。

下面是几个步骤要做。。

选择RGB值中的任何根颜色。
```
:root {
     --color: 130, 16, 253;
 }
```
为根添加相同的颜色,但具有一定的不透明度 长方体阴影 .这是一个你正在使用的技巧变量在另一个 --阴影颜色 变量
```
: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);
}

享受:)

2

7

shrpne 5 年前

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

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

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

编辑:自Safari 13.0.3以来似乎已修复

3

0

workaholic 7 年前

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

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