"-webkit-text-fill-color"和"color"之间的区别是什么？

Question

我试图理解-webkit-text-fill-color和color之间的区别？它们是否有任何功能上的区别？就我所知，它们完全相同。但是，有没有可能使用其中一个而不能使用另一个？

- android.nick

Answer 1

来自WebKit博客：

text-fill-color - 此属性允许您为文本指定填充颜色。如果未设置，将使用color属性进行填充。

是的，它们是相同的，但是如果两者具有不同的值，-webkit-text-fill-color会优先于color。

我认为这样做的理由是，在使用-webkit-text-stroke时，您可以选择不同的颜色，但如果-webkit-text-stroke不可用（因此-webkit-text-fill-color也不可用），它将平稳地回退到color。可能会出现无法阅读的文本情况。

请注意，截至2021年，-webkit-text-fill-color（以及可能的其他以-webkit为前缀的属性）不一定仅限于基于WebKit的浏览器（即它在Firefox中也可以工作）。

- Andrew Marshall

---

补充你的答案：-webkit-text-fill-color 只能针对基于 Webkit 的浏览器进行定位，而 color 可用于定位其余浏览器。 - seeming.amusing

是的，-webkit-text-fill-color 属性只适用于 Webkit。此外，颜色属性也适用于边框。如果你给一个具有 color 属性但没有指定边框颜色的元素分配了一个边框，那么边框将默认为 color 属性的值。 - dangerChihuahua007

当然，这是特定于 Webkit 的，但这并不是问题的重点 - 因为最终所有其他浏览器可能都会添加 text-fill-color。我更想知道的是，你会用它做什么，或者当它与另一个属性执行相同操作时，它将如何使某人受益。安德鲁的解释似乎很有道理。 - android.nick

在iOS上，这两者之间存在差异。Safari倾向于将禁用输入颜色设置为其自己预定义的颜色，并且它会覆盖您在CSS中定义的color。到目前为止，改变它的外观的唯一方法是使用*-webkit-text-fill-color*。 - CodeGems

一个额外的区别（至少目前是这样，我不知道2012年的情况）是颜色设置了关键字currentcolor。这可以在其他地方使用（参见https://developer.mozilla.org/en-US/docs/Web/CSS/color）。还要注意的是，text-fill-color似乎没有标准轨迹，尽管所有主要浏览器似乎都支持它，尽管带有-webkit-前缀。 - A Haworth

Answer 2

-webkit-text-fill-color可以设置为transparent，这样就可以在文本上进行一些非常有趣的操作，例如设置水平渐变。请查看此彩虹文本示例：http://jsfiddle.net/DoubleYo/qGfzm/

- Micah Winkelspecht

---

当您将“-webkit-text-fill-color”更改为“color”时，仍然有效。 - Nick Retallack

它的确有用，但在这种情况下，您可以使用它来针对 Webkit 进行定位。因为只有 Webkit 支持 [-webkit-]background-clip: text，如果你将 color 设置为透明并在非 Webkit 浏览器中打开它，文本将完全看不见！这使您可以为其他浏览器设置备用的 color，以在渐变上显示，同时让 Webkit 保持美观。 - Meshaal

这个属性能否应用过渡效果？ - vuquanghoang