CSS文本背景剪辑在Firefox上与在Chrome上非常不同(CSS text background

CSS文本背景剪辑在Firefox上与在Chrome上非常不同(CSS text background-clip very different on Firefox than on Chrome)

Chrome：所需的效果

Firefox：发生了什么

码：

background-color: Red; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

思考？

Chrome: the desired effect

Firefox: what is happening

Code:

background-color: Red; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Thoughts??

最满意答案

尽管firefox支持-moz-background-clip。 不支持“text”值。 您将不得不使用非webkit浏览器的其他解决方案。

示例： http ： //nimbupani.com/using-background-clip-for-text-with-css-fallback.html

Even though -moz-background-clip is supported in firefox. The 'text' value is not supported. You are going to have to go with another solution for non webkit browsers.

Example: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html