如何使用CSS实现文本阴影？

Question

如何使用CSS中的阴影处理文本以实现类似下面的“30个免费矢量图标”文本的效果？

Answer 1

试试这个：

HTML：

<div style="background:#ccccc;"><h1 class="myshadow">Cool text</h1></div>

CSS：

    h1.myshadow{
            color: #C8C8C8;
            letter-spacing: 2px;
            text-shadow: 1px 1px white, -1px -1px #444;
    }

您需要使用的CSS属性是text-shadow

更多信息：http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Answer 2

这里有一些关于CSS3阴影的信息

这里显示了不同的方法来实现框阴影和文本阴影 http://www.webdesignshock.com/css3-drop-shadow

以下是文字阴影示例

http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

为了在视觉上匹配您的示例，此演示使用相同的颜色和效果

http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html

Answer 3

有text-shadow属性，在Internet Explorer之外得到了相当好的支持。 IE’s Glow filter提供了一种类似的效果。

Safari和Chrome也有-webkit-text-stroke，但其他任何地方都不支持。