如何创建漂亮的文字深度\阴影效果？ （HTML）

Question

我需要一些JS类或CSS方法来创建任何文本，例如像on this web page...

这样的阴影文本

页面屏幕：

screen from Yummygum site http://superior0.narod.ru/deepText.jpg

我需要它在IE 6,7,8 Chrome 4，FF 3等中工作

Answer 1

Inspect元素说： text-shadow:0 1px 0 #3B3B3B;

有关text-shadow http://www.quirksmode.org/css/textshadow.html http://www.css3.info/preview/text-shadow/

的更多信息

Answer 2

您可以使用css3的text-shadow属性创建该效果。

示例：

p.test {
    text-shadow: #6374AB 20px -12px 2px;
}

快速预览：

当然，您必须根据需要修改值。

注意：此属性属于CSS3， Internet Explorer 尚不支持。但是，大多数其他现代浏览器都支持CSS3。

Answer 3

利用CSS3 text-shadow property。但是，并非所有webbrowsers都支持此功能。您可能需要考虑jQuery TextShadow plugin以不显眼的方式覆盖不受支持的内容。

Answer 4

如果你必须使用IE6，你必须使用旧的黑客（或者一如既往 - 滥用JQuery，因为它会踢屁股）。像这样：

<style>
  .text1{ color: white }
  .shadow1{ color: silver; position: relative; right: 1px; bottom: 1px }
  .shadow1{ color: black; position: relative; right: 2px; bottom: 2px }
</style>
<div class="text1">Text shadow</div>
<div class="shadow1">Text shadow</div>
<div class="shadow2">Text shadow</div>

非常非常老派。小心不要将其粘贴在HTML4.01过渡页面的表格中; - ）