CSS“凹陷”/“插入”字母效果，不使用图像

Question

如何在此菜单中对这些字母应用“凹陷”或“插入”效果？我（简要地）看了一下Firebug但是找不到他们是怎么做的。在FF中工作，而不是在IE中工作。

有关实际示例，请参阅http://balsamiq.com/products/mockups/mybalsamiq。

Answer 1

这只是一个Text Shadow，颜色比背景浅，而不是更暗，使它看起来像斜面。 （我们经过培训，相信电脑屏幕上的“阳光”通常来自左上角。）

使用Safari开发者工具时显示的CSS规则显示：

text-shadow: white 0px 1px 0px;

Answer 2

这很可能是text-shadow：

p {
    text-shadow: 0 1px 0 #fff;
}

现有的IE版本（甚至IE9测试版）都不支持text-shadow。

Answer 3

就是这样：

text-shadow: 0 1px 0 #FFFFFF;

Answer 4

正如我所看到的，它是产生效果的颜色组合。只需将文本更改为红色，文本就不会再插入。

Answer 5

这是我使用:before和:after伪元素发现的一个小技巧：

http://dabblet.com/gist/1609945