不使用图片实现CSS“凹陷”/“内嵌”字母效果

Question

3

这个菜单中的字母是如何应用“凹陷”或“嵌入”效果的？我用Firebug看了一下，但没找到他们是如何做到的。在FF中可以工作，但在IE中不行。

- Ben

5个回答

4

那很可能是一个"text-shadow"效果：

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

目前所有版本的IE浏览器（即使是IE9测试版）都不支持text-shadow属性。

- BoltClock

1

这是：

text-shadow: 0 1px 0 #FFFFFF;

- sinelaw

0

据我所见，是颜色组合产生了效果。只需将文本更改为红色，文本就不再是内嵌的了。

- Hoàng Long

0

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

- Web_Designer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

这只是一个文本阴影，它的颜色比背景色更浅而不是更暗，使其看起来像一个斜角。（我们一般认为电脑屏幕上的“阳光”通常来自左上角。）

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

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