自从有了css3，给文字加上阴影效果，我们可以轻松地使用css实现了。使用css3的text-shadow也能做出ps效果的文字，简而言之，text-shadow属性就是给文本设置阴影效果的。

首先我们看一下它的语法

语法：

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

取值：

<length> ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

<color> ：指阴影的颜色。

具体语法说明：

text-shadow:x-shadow y-shadow blur color;

text-shadow:x轴偏移量 y轴偏移量 模糊半径 颜色;

text-shadow:5px 5px 4px #f60;

X轴偏移量：必选。是阴影的水平偏移距离，如果值为正值，阴影向右偏移，其值为负值时，阴影向左偏移；

Y轴偏移量：必选。是阴影的垂直偏移距离，如果值为正值，阴影向底部偏移，其值为负值时，阴影向顶部偏移；

模糊半径：可选。只能为正值，其值越大阴影的边缘就越模糊；反之阴影越清晰。

颜色：可选。是指阴影的颜色，其可以使用rgba色。

text-shadow可以设定多组效果，方式是用逗号隔开。

如：text-shadow:1px 1px 1px #f60,2px 2px 1px #f60,3px 3px 1px #f60,4px 4px 1px #f60;

兼容性：

chrome2.0.x+、firefox3.5+、opera9.6+、safari4+都支持css3的text-shadow属性。

ie9以及ie9以下不支持text-shadow,那么要兼容的话，可以使用滤镜filter:shadow来处理。

filter:shadow(Color=颜色值,Direction=数值,Strength=数值)

Color用于设定对象的阴影色；Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的模糊半径值。

下面来看具体的例子：（均只写text-shadow标准）

所有demo的公用样式和html为： 

.box {
    width: 600px;
    height: 80px;
    background: #666;
    font: bold 50px/80px "微软雅黑";
    color: #fff;
}

html：

<div class=”box demo”>TEXT SHADOW DEMO</div>

各个例子替换上对应class即可。。

1、例子一：

css: 
.demo{
    text-shadow:5px 5px 4px #f60;
}
效果：

TEXT SHADOW DEMO


2、例子二：

css: 
.demo1{
    color:#000;
    text-shadow:0 1px 1px #fff;
}
效果：

TEXT SHADOW DEMO


3、例子三：

css: 

.demo2{
    color:#000;
    text-shadow:1px 1px 0 #fff;
}
效果：

TEXT SHADOW DEMO


4、例子四：

css: 

.demo3{
    color:#ccc;
    text-shadow:-1px -1px #fff,1px 1px #333,1px 1px #444;
}
效果：

TEXT SHADOW DEMO

 

5、例子五：

css: 

.demo4{
    color:transparent;
   text-shadow:0 0 7px #f87,1px 1px 0 #333,1px 1px 0 #444;
}

效果：

TEXT SHADOW DEMO

 

6、例子六：3D效果一

css: 

.demo5{
    color:#fff;
   text-shadow:1px 1px #AFEEEE,2px 2px #AFEEEE,3px 3px #AFEEEE,4px 4px #AFEEEE,5px 5px #AFEEEE;
}

效果：

TEXT SHADOW DEMO

 

7、例子七：3D效果二

css: 

.demo6{
    color:#fff;
    text-shadow:-1px -1px #AFEEEE,-2px -2px #AFEEEE,-3px -3px #AFEEEE,-4px -4px #AFEEEE,-5px -5px #AFEEEE;
}

效果：

TEXT SHADOW DEMO

 

8、例子八：

css: 

.demo7{
    color:#fff;
    text-shadow:5px 5px 5px #AFEEEE;
}

效果：

TEXT SHADOW DEMO