Question

行为看起来是一样的。

body {
  text-align: center;
}

p {
  font-size: 2.5em;
  background-image: linear-gradient(to bottom, #ff0052, #8e2b88);
  -webkit-background-clip: text;
}

p.-webkit {
  -webkit-text-fill-color: transparent;
}

p.color {
  color: transparent;
}

<p class="-webkit">-webkit-text-fill-color: transparent</p>
<p class="color">color: transparent</p>

（或参见Codepen）

-webkit-background-clip: text的浏览器支持要弱于-webkit-text-fill-color: transparent，因此很可能我们没有获得更好的浏览器支持，但是它会改变任何东西（例如更多/更少的最佳渲染）吗？

Answer 1

此功能不是标准功能，也不在标准轨道上。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且将来的行为可能会发生变化。

来源： https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color

-webkit-text-fill-color：transparent和color：transparent之间有区别吗？

1 个答案: