“-webkit-text-fill-color”和“color”之间的区别？答案

【问题标题】：Difference between "-webkit-text-fill-color" and "color"?“-webkit-text-fill-color”和“color”之间的区别？
【发布时间】：2021-11-22 06:37:30
【问题描述】：

我想了解-webkit-text-fill-color 和只是简单的color 之间的区别？有什么功能上的区别吗？据我所知，它们是完全一样的。有什么你可以用一个而不是另一个做的吗？

【问题讨论】：

标签： css colors webkit fill

【解决方案1】：

来自WebKit blog：

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

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

我认为这样做的理由是在使用-webkit-text-stroke 时，您可以根据需要选择不同的颜色，但如果-webkit-text-stroke 不可用，它会优雅地回退到color（因此-webkit-text-fill-color也不是）。在某些情况下，您可能会得到不可读的文本。

请注意，自 2021 年起，-webkit-text-fill-color（可能还有其他带有 -webkit 前缀的属性）不一定仅适用于基于 WebKit 的浏览器（即它可以在 Firefox 中运行）。 p>

【讨论】：

补充您的答案：-webkit-text-fill-color 仅允许定位基于 Webkit 的浏览器，而 color 可用于定位其余浏览器。
没错，-webkit-text-fill-color 是特定于 Webkit 的。此外，颜色属性扩展到边框。如果您为具有color 属性的元素分配边框并且未指定边框颜色，则边框将默认为color 属性。
当然它是特定于 webkit 的，这并不是真正被问到的 - 因为最终所有其他浏览器可能会添加 text-fill-color。我更想了解您将其用于什么目的的基本原理，或者当它与另一个财产做同样的事情时它将如何使某人受益。安德鲁的理由似乎有道理。
这两者在 iOS 上是可见的。 Safari 倾向于将禁用的输入颜色设置为它自己的预定义颜色，它会覆盖您在 CSS 中定义的 color。到目前为止，改变它的唯一方法是使用 -webkit-text-fill-color

【解决方案2】：

-webkit-text-fill-color 可以设置为transparent，它允许你在文本上做一些非常有趣的事情，比如设置一个水平渐变。查看这个彩虹文本示例：http://jsfiddle.net/DoubleYo/qGfzm/

【讨论】：

当您将 '-webkit-text-fill-color' 更改为 'color' 时，这仍然有效。
@NickRetallack 确实如此，但在这种情况下，您可以使用它专门针对 Webkit。由于只有 Webkit 支持[-webkit-]background-clip: text，如果将color 设置为透明并在非 Webkit 浏览器中打开，文本将完全不可见！这让您可以为其他浏览器使用后备 color，这些浏览器将显示在渐变之上，同时让 Webkit 继续漂亮。
是否可以为此属性应用过渡？