在以前，如果想给文字加上特殊的样式，比如发光、阴影等效果，就必须用PS把文字保存为图片才能在网页上正常显示。
而CSS3新增的text-shadow属性，可以轻松实现文字投影、发光、内阴影等很棒的立体效果，而且效果自然，不逊于PS制作出的效果。具体效果如图：
一、text-shadow的语法
按照惯例，先把w3c的官方文档看一遍： CSS3 text-shadow 属性
- text-shadow: none|h-shadow v-shadow blur color;
none：无阴影，默认值。
h-shadow:设置对象的阴影水平偏移值。可以为负值
v-shadow:设置对象的阴影垂直偏移值。可以为负值
blur:设置对象的阴影模糊值。不允许负值，可以缺省。
color:设置对象的阴影的颜色。 可以缺省。缺省的时候默认是#333深灰色，不是黑色。
在学习各种效果之前，我认为你应该明白，阴影核心其实是对原来对象的复制
比如我复制了两个原对象，并设置了它的偏移值、 模糊值和颜色。
.ts1{
text-shadow:10px 20px 1px #666,20px 40px 3px #999;}
下面来看看 text-shadow强大的立体效果。
先为所有demo统一设置样式：
.demo{
width:400px;
padding:30px;
background-color:#ccc;
font:bold 50px/2 "microsoft Yahei";
color:#333;
text-transform:uppercase;
margin-bottom:20px;}1、最常见的大量文字段落的简单阴影效果
.ts2{
font-size:16px;
text-shadow:0 1px #eee;
color:#121212;}
.ts3{
background-color:#666;
color:#eee;
font-size:16px;
text-shadow:0 1px #121212;}
这样的阴影要求是简单有质感，重点是黑白灰的反差对比产生效果。文字深色，背景亮色，阴影比背景更亮一点。文字亮色，背景深色，阴影比背景更深一点。需要看起来若有若无，但是比没有又更有细节上的质感。这种效果仅需要y坐标向下移动1px，水平和模糊都没有。
2、常见的x、y正向偏移文字阴影效果
.ts4{
background-color:#ddd;
color:#fff;
text-shadow:2px 2px #777;
}
3、凸起的效果，有点像轻微的浮雕
.ts5{
text-shadow:-1px -1px #fff,1px 1px #333;
color:#ccc;
background-color:#888;}
高光在左上，暗面在右下，所以高光x、y都是负值，暗面x、y为正值。切换高光和暗面的正负可以产生相反的凹效果。如果熟悉ps的样式面板会更好理解。知识都是相通的。还有一点，就是颜色的对比。
4、凹下去的效果，和凸出的效果刚好相反。
.ts6{
font-family:Verdana, Geneva, sans-serif;
color:#666;
text-shadow:-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;}
做了两层，看起来凹的更厉害。关键就是阴暗面在左上，亮面在右下。
5、文字阴影半透明立体效果
.ts7{
font-family:Tahoma, Geneva, sans-serif;
color:rgba(203,29,77,.5);
text-shadow:-5px -5px rgba(70,232,240,.5);}
关键是利用rgba的半透明效果，实现了叠加。
6、3D立体效果
.ts8{
background-color:#333;
color:#1C9F96;
text-shadow:1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;
}
做3D效果的关键是阴影一层一层的叠加，也就是复制一个又一个的对象，每一次的偏移比上次的多1px，颜色完全一样。负值可以产生反方向的3D效果。
7、仿古体字效果
.ts9{
font-family:Georgia, "Times New Roman", Times, serif;
color:#eee;
background-color:#666;
text-shadow:5px 5px #666,7px 7px #eee;}
效果的核心就是第一个阴影颜色和背景色一样，第二个阴影颜色和文字颜色一样。
8、荧光棒效果
.ts10{
background-color:#000;
color:transparent;
text-shadow:0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;}
关键点是文字使用的 transparent透明色，所以文字本身不见了，通过白色描边，再前后加上了一定模糊的阴影，好像夹心饼干一样。
9、利用 opacity实现半透明花纹字体
body{
background:url(images/body_bkg.png);}
.ts11{
background-color:#222;
color:#333;
opacity:.4;
text-shadow:-1px -1px rgba(255,255,255,.3),1px 1px rgba(0,0,0,.8);
}
文字和背景颜色一致，高光和阴暗面采用了rgba的方式，对白色和黑色用了透明度的效果，更柔和，再利用 opacity可以实现半透明的效果，看到了背景的花纹图片。
10、文字描边样式
如果使用阴影来描边文字，会发现文字的转折处都有断点，稍微不好看。
.ts12{
color:#fff;
text-shadow:-1px 0 #666,0 -1px #666,1px 0 #666,0 1px #666;
}
有一个webkit前缀的专用属性 text-stroke,可以实现为文字描边，但是这个属性是 -webkit-私有的，火狐还有IE类的浏览器是不支持的。
.ts12{
color:#fff;
-webkit-text-stroke:1px #666;/*文字描边*/
}
可以发现利用 text-stroke描边文字是没有断点的。
11、3D渐变模糊投影
.ts13{
color:#0DCFDF;
text-shadow: 0 0 2px #686868,0 1px 1px #ddd, 0 2px 1px #d5d5d5, 0 3px 1px #ccc, 0 4px 1px #c5c5c5,
0 5px 1px #c1c1c1, 0 6px 1px #bbb, 0 7px 1px #777,0 8px 3px rgba(100,100,100,0.4),0 9px 5px rgba(100,
100,100,0.09),0 10px 7px rgba(100,100,100,0.14),0 11px 9px rgba(100,100,100,0.2),0 12px 11px rgba(100,100,
100,0.24),0 13px 15px rgba(100,100,100,0.29);
background-color:#fff;
}
此3D投影相比与纯色的3D投影，看起来更有立体和阴影的质感。只是颜色由浅入深，慢慢增加模糊值，对深色使用了rgba半透明度，可以叠加的更加柔和立体。
综上所述，文字的阴影效果其实就是一层一层的复制叠加，可以为一个复制出来的对象设置偏移值和模糊值，还有颜色。
多观察，多思考，多练习，根据具体的网页需求设计出不同的文字效果，为网页效果增添光彩。
