在以前，如果想给文字加上特殊的样式，比如发光、阴影等效果，就必须用PS把文字保存为图片才能在网页上正常显示。

而CSS3新增的text-shadow属性，可以轻松实现文字投影、发光、内阴影等很棒的立体效果，而且效果自然，不逊于PS制作出的效果。具体效果如图：

一、text-shadow的语法

按照惯例，先把w3c的官方文档看一遍： CSS3 text-shadow 属性

none：无阴影，默认值。

h-shadow:设置对象的阴影水平偏移值。可以为负值

v-shadow:设置对象的阴影垂直偏移值。可以为负值

blur:设置对象的阴影模糊值。不允许负值，可以缺省。

color:设置对象的阴影的颜色。 可以缺省。缺省的时候默认是#333深灰色，不是黑色。

在学习各种效果之前，我认为你应该明白，阴影核心其实是对原来对象的复制

比如我复制了两个原对象，并设置了它的偏移值、 模糊值和颜色。

下面来看看 text-shadow强大的立体效果。

先为所有demo统一设置样式：

1、最常见的大量文字段落的简单阴影效果

这样的阴影要求是简单有质感，重点是黑白灰的反差对比产生效果。文字深色，背景亮色，阴影比背景更亮一点。文字亮色，背景深色，阴影比背景更深一点。需要看起来若有若无，但是比没有又更有细节上的质感。这种效果仅需要y坐标向下移动1px，水平和模糊都没有。

2、常见的x、y正向偏移文字阴影效果

3、凸起的效果，有点像轻微的浮雕

高光在左上，暗面在右下，所以高光x、y都是负值，暗面x、y为正值。切换高光和暗面的正负可以产生相反的凹效果。如果熟悉ps的样式面板会更好理解。知识都是相通的。还有一点，就是颜色的对比。

4、凹下去的效果，和凸出的效果刚好相反。

做了两层，看起来凹的更厉害。关键就是阴暗面在左上，亮面在右下。

5、文字阴影半透明立体效果

关键是利用rgba的半透明效果，实现了叠加。

6、3D立体效果

做3D效果的关键是阴影一层一层的叠加，也就是复制一个又一个的对象，每一次的偏移比上次的多1px，颜色完全一样。负值可以产生反方向的3D效果。

7、仿古体字效果

效果的核心就是第一个阴影颜色和背景色一样，第二个阴影颜色和文字颜色一样。

8、荧光棒效果

关键点是文字使用的 transparent透明色，所以文字本身不见了，通过白色描边，再前后加上了一定模糊的阴影，好像夹心饼干一样。

9、利用 opacity实现半透明花纹字体

文字和背景颜色一致，高光和阴暗面采用了rgba的方式，对白色和黑色用了透明度的效果，更柔和，再利用 opacity可以实现半透明的效果，看到了背景的花纹图片。

10、文字描边样式

如果使用阴影来描边文字，会发现文字的转折处都有断点，稍微不好看。

有一个webkit前缀的专用属性 text-stroke,可以实现为文字描边，但是这个属性是 -webkit-私有的，火狐还有IE类的浏览器是不支持的。

可以发现利用 text-stroke描边文字是没有断点的。

11、3D渐变模糊投影

此3D投影相比与纯色的3D投影，看起来更有立体和阴影的质感。只是颜色由浅入深，慢慢增加模糊值，对深色使用了rgba半透明度，可以叠加的更加柔和立体。

综上所述，文字的阴影效果其实就是一层一层的复制叠加，可以为一个复制出来的对象设置偏移值和模糊值，还有颜色。

多观察，多思考，多练习，根据具体的网页需求设计出不同的文字效果，为网页效果增添光彩。