html - CSS 文本背景剪辑在 Firefox 上与在 Chrome 上非常不同

Question

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;

想法??

Answer 1

尽管 firefox 支持 -moz-background-clip。不支持“文本”值。对于非 webkit 浏览器，您将不得不采用另一种解决方案。

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