CSS 文字阴影在网页设计中的应用
C S S不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画，里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘，IE8 都不行，在这个 IE 特别是 IE6 居高不下的国度怎么办，由它去吧。
兼容性
据 MDC 的文档，支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。
阴影文字和发光文字
一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。
text-shadow: 1px 2px 5px #888;
text-shadow: 0 0 10px #fd8;
浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果
text-shadow: 0 -1px 0 #123; 凹进效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果 – /
多重阴影
在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。
text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;
text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;
text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;
text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
鼠标悬停切换
让鼠标悬停的时候改变状态是个不错的主意，有很强的互动的感觉。阅读器中可能看不到效果。另外，在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影，这是另一个应用于块模型的阴影属性，写法和 text-shadow 一样，但需要写两条：-moz-box-shadow 和 -webkit-box-shadow.
半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。
text-shadow: 1px 2px 3px #888; 杯具了
这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。
text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
动态阴影
搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程，仅 Chrome, Safari 等 WebKit 浏览器有效。
悬停动画这个 真好…
Firefox还看不到啊~
不会吧，低于 3.5?
..动画那个，呵呵
那是，的确 firefox 还没有支持啊
十年前的网页就充斥着CSS阴影和js特效
MDC 上提到过 IE5.5 有类似的效果。。不过我对十年前的网页已经没有什么印象了，只会上聊天室 😮
那时只知道花骚啊·
很棒 超喜欢文字阴影
老肥总是走在时尚的前沿…
时尚啥，楼上的说了，十年前就泛滥过的东西，哈哈。只是说严格的讲不是同一个东西而已咯
高招！妙用啊
文集阴影下过很好看，就是最后的那个效果firefox不支持，很遗憾
最后那个也不重要了，动画还得 js, 用 css 做动画兼容的浏览器太少啊
占个位置，坐下来慢慢研究，浮雕的漂亮，俺打算图标换个。
老肥的风格受 Mac OS X 影响不小,水果的UI就是细腻
看起来不错……
可是如果ie7和ff 3.5.*都无法支持的话，那很无语了……呵呵
最后一个效果只在我的chrome下有效，其他没试。
ie 全系列无效，firefox 3.5+ 没问题的
我的ff是3.5.7的。
😮 很精致的效果，很有苹果风格，漂亮～
不收藏怎么对的起我
阴影而有层次感，适当的应用能增加一错的效果！
👍 这个一定要来留个脚印⋯⋯
效果很好看 非常喜欢 学习学习
这个技术很好
莫名其妙就来到了这里，留个言O(∩_∩)O哈哈~
哪里被你搞了这篇文章啊
很漂亮的效果，没事呵呵，我不用IE
网站变快了啊，换双线了吗？
全面优化过了，代码全部重写的。。
要是能够兼容所有浏览器就好了
最喜欢用~凹进效果~觉得很大气的感觉
好好耍。。
图片也可以么
仅文本，图片（和其它块元素）要用 -moz-box-shadow 和 -webkit-box-shadow
这个主题很好看D 😀
我是一个在广东执业的律师，我觉得您的博客很漂亮，能给我一些提示吗？比如：模板来自于哪里？我不懂电脑技术，想做一个您这样的网站，但不知从何做起。
如果您能回邮件给我，我会非常感谢您。我应当说是一个资深律师，如果您遇到法律问题，我会很热情地给您解答。
谢谢来访！
这个博客是基于 WordPress 这个开源免费的系统，架设在 PHP 主机上的，我的模板修改自 Gluedideas Subtle. 这些链接都在我的博客页脚看得到。
另外您还需要一个域名，域名和主机的花费加起来大概在每年100多块左右。
哈，很棒
收藏了 等以后用空了再学
博客很漂亮啊
不错，收藏了，有空试试。
恩，iphone里随处可见
效果太棒了，很喜欢浮雕文字效果
Opera10.50可以看到效果,但是为嘛我用在我主题里就没效果,嘎
还有一个好消息,在Opera10.50里,回复边上的头像它歪了,终于歪了 😀
text-shadow 没什么兼容性问题的，opera 早就支持了，而且对 gecko, webkit 也不用加 -moz- -webkit- 什么的。
倒是 transform 这些 css3 才有的属性是 opera 10.50 才支持的，写法也有些不同，比如 border-radius 不加私有前缀，但是 transform 要加，要写作 -o-transform
挺麻烦的。。。
谢谢，也许是我代码有问题，算了，我的主题也达不到你这样的效果，来你这欣赏一下就可以了，哈哈
总是很好看吧，
管那么多，抄袭你的代码再说
mac下你用的什么编辑啊?
这么炫的评论效果！！！
这模版不错 🙂
CSS3增加了很多效果，可惜我们这IE6实在多，有些时候为了流量，很多网站不愿意去用去改
正在找这个CSS代码，终于到我找到了，多谢了。顺便表扬一句，你的博客主题很漂亮
牛人，不愧是牛人，这效果也未免太漂亮了吧。而且这个篇文章应该也不简单吧，要修改上不少东西才对吧。
不错！收藏了
虽然这文章是1月份的 但是我还是想问 文字阴影在chrome8下无效了吗？那个鼠标悬停动画就可以。
不大可能啊，text-shadow?
很不错，先收藏了，说不很快IE6就会死亡了。
受用了谢谢
这个一定要来留个脚印⋯⋯
不过IE杯具就大了。。。。。。
一般用户大多是用IE的吧。。。。
很不错的文字阴影
很漂亮啊，学习了
这不错啊，长进了。。
我是山城重庆巴南的，老乡哦。。。现在苏州混日子。。
不知道，您是哪儿的啊
太好了这些字体
博主你能不能吧你的发表评论的留言板换成固定的要不就放在博客的最底部。我了你一会的博文，就感觉头晕啊，能不能去掉，太烦了。 :O
受教了… 🙂
魅力出自设计人员之手
CSS， 一直在学习呢。
😀 🙂
不错，第一次看到这些效果，以后要用一用了。