css - 使用CSS变量定义-webkit-background-clip属性在Chrome上不起作用

众所周知，可以使用CSS变量来简化编写需要浏览器特定的供应商前缀的属性。（请参阅Lea Verou，“ Autoprefixing, with CSS variables!”。）例如，

* {
  --clip-path: initial ;
  -webkit-clip-path: var( --clip-path ) ;
  clip-path: var( --clip-path ) ;
}
.maximalCircle {
  --clip-path: circle(50%);
}

在这个例子中

设置--clip-path:initial;会取消继承，因此，只有在该元素中定义了clip-path时，该元素才会具有initial以外的border-box值（等于--clip-path）。
--clip-path: circle(50%);有效地设置香草clip-path和特定于WebKit的-webkit-clip-path属性的值。

您可以在this Pen上看到它的运行情况。

但是，我无法使用CSS变量简化另一个属性：-webkit-background-clip属性：如果我将CSS变量--clip-path:text;分配为-webkit-background-clip属性的值，则（a）Safari（和Firefox）感觉不错，但（b）Chrome无法理解（例如，Chrome中的计算值为background-clip: border-box，这是默认值）。

[在所有这些测试中，我正在使用Safari 12.1.1，Firefox Quantum 67.0.4，Firefox Developer Edition 68.0b12和Chrome 75.0.3770.100。]

下面的最小工作示例的注释：一个<div class="text-masked-gradient">包含一个文本字符串，它位于渐变背景上。 CSS background-clip:text（和/或-webkit-background-clip:text）属性应使背景仅通过文本本身显示。下图显示了（a）它工作时的外观（L）和（b）不工作时的外观（R）。

css - 使用CSS变量定义-webkit-background-clip属性在Chrome上不起作用-LMLPHP

我的HTML标记：

<div class="text-masked-gradient">
  YELP
</div>

完整的CSS如下。此代码也位于this Pen。（出于诊断目的，我在this other Pen中考虑了更多方案）。

完整的CSS：

.text-masked-gradient {
  --background-clip: text ;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: var( --background-clip );

  height: 150px ;
  width: 300px ;
  outline: solid black ;
  margin: 50px ;
  font-size: 7em ;
  text-align: center ;
  font-weight: 700 ;
  background-image:
    radial-gradient(circle at top left,red,chartreuse);
}

这可以正确呈现在：

苹果浏览器
Firefox Quantum
Firefox开发人员版

但不在

Chrome（整个矩形是渐变色，没有文字）。

难道我做错了什么？这是与CSS变量和-webkit-background-clip属性有关的Chrome错误吗？

（如果您使用-webkit-background-clip:text而不是webkit-background-clip:var(--background-clip)，则此示例在所有这些浏览器（包括Chrome）中都可以正常工作。）

最佳答案

Lea Verou已确认这是Chrome错误。她创建了此reduced test case，使用Chrome浏览器时失败。她提交了以下错误报告：Issue 980439。

最重要的是，当您尝试使用CSS变量（例如background-clip，其中CSS变量为background-clip:--a）定义text属性时，会出现一个WebKit错误（从而影响Safari和Chrome）。这会导致Chrome和Safari忽略有效的-webkit-background-clip:text规则。请参见Bug 199410 - background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text。

由于这两个错误，目前background-clip属性不是使用CSS变量来简化供应商前缀的理想选择。

关于css - 使用CSS变量定义-webkit-background-clip属性在Chrome上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56843922/

Clip

css - 使用CSS变量定义-webkit-background-clip属性在Chrome上不起作用