如何解决“无效属性”问题[重复]答案

【问题标题】：How do I solve 'invalid property' issue [duplicate]如何解决“无效属性”问题[重复]
【发布时间】：2021-08-07 14:29:52
【问题描述】：

我为下面代码使用的 h3 添加了渐变背景，以便仅向文本添加渐变。

gradient text

.locations-head h3 {
  padding: 4rem 0rem;
  background: linear-gradient(#131c27, #663b34);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class = "locations-head">
  <h3> This is a test </h3>
</div>

这在 Firefox 中运行良好，但在 chrome 中，它似乎是 background-clip: text;不管用。开发者工具还突出显示了这个 sn-p 并将其标记为无效属性。

【问题讨论】：

也添加-webkit-background-clip: text;。

标签： css google-chrome web

【解决方案1】：

根据caniuse.com/?search=background-clip，即使是最新版本的chrome也需要-webkit-background-clip属性的浏览器前缀。

.locations-head h3 {
  padding: 4rem 0rem;
  background: linear-gradient(#131c27, #663b34);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class = "locations-head">
  <h3> This is a test </h3>
</div>

【讨论】：