我试图理解-webkit-text-fill-color
和color
之间的区别?它们是否有任何功能上的区别?就我所知,它们完全相同。但是,有没有可能使用其中一个而不能使用另一个?
来自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中也可以工作)。
-webkit-text-fill-color
可以设置为transparent
,这样就可以在文本上进行一些非常有趣的操作,例如设置水平渐变。请查看此彩虹文本示例:http://jsfiddle.net/DoubleYo/qGfzm/
[-webkit-]background-clip: text
,如果你将 color
设置为透明并在非 Webkit 浏览器中打开它,文本将完全看不见!这使您可以为其他浏览器设置备用的 color
,以在渐变上显示,同时让 Webkit 保持美观。 - Meshaal
-webkit-text-fill-color
只能针对基于 Webkit 的浏览器进行定位,而color
可用于定位其余浏览器。 - seeming.amusing-webkit-text-fill-color
属性只适用于 Webkit。此外,颜色属性也适用于边框。如果你给一个具有color
属性但没有指定边框颜色的元素分配了一个边框,那么边框将默认为color
属性的值。 - dangerChihuahua007text-fill-color
。我更想知道的是,你会用它做什么,或者当它与另一个属性执行相同操作时,它将如何使某人受益。安德鲁的解释似乎很有道理。 - android.nick