1

我想用 CSS 创建一个插入文本。它在 Chrome 和 safari 上运行良好，但在 firefox 和 IE 上也无法运行，我尝试了无数种可能性，但仍然无法运行：-/ 你能帮我解决这个问题吗？

CSS：

text-align: center;
line-height: 60px;
font-size: 60px;

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

这就是它在 Firefox 中的样子 这就是它在 chrome 中的外观

如何在 Firefox 上实现相同的设计？看起来背景颜色和文本的透明颜色有问题，但我似乎无法弄清楚它们如何在 Mozilla 和 IE 上协同工作。

4

1 回答 1

0

我做了一个小例子jsfiddle。创建这种阴影的技巧是在文本上方和下方添加一个文本阴影（两者都在后面，但它们向上或向下移动）。

http://jsfiddle.net/mine/ru6pc/

它似乎适用于 Firefox，但我猜你会遇到 IE 的问题。IE < 10 还不支持 CSS-text-shadow，所以你可以看看 pie-CSS（我不知道他们是否支持它，但可能值得一看）。

.inset {
    font-family: Arial;
    font-weight: bold;
    font-size: 20pt;
    color: #4e830f;
    text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.75),
                 0px 1px 2px rgba(255, 255, 255, 0.75);    
}
于 2013-08-06T12:15:17.790 回答