Question

我创建了这个文字效果：

.inset-text
{
    background-color: #666666;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0 3px 3px;          
}

<p class="inset-text">Some Text</p>

不幸的是，如果您尝试使用Firefox运行此示例，则会在Chrome中看到灰色矩形，一切正常。如何解决此问题？

Answer 1

您确定background-clip可以取值text吗？在w3schools或Mozilla Developer Network中我都没有看到列出的内容。顺便说一下，Firefox现在也只接受background-clip。

Answer 2

background-clip: text;

目前仅支持基于webkit的浏览器（Chrome和Safari）。这是非标准的，因此很难说其他浏览器（Firefox，Opera和Internet Explorer）是否会支持text属性。你想要达到什么效果？我可以在不使用它的情况下给你一个很好的选择。

使用chrome和firefox 10.2的结果完全不同

2 个答案: