text-shadow属性用于设置文本内容的阴影效果或模糊效果。目前，text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看，大部分移动平台的Web浏览器都能得到很好的支持。
text-shadow的语法和box-shadow的语法基本上一致：
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
相关属性 ： 无
取值：
<color> ：指定颜色。
<length> ：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> ：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。
说明：
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow
text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：
x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 阴影颜色
h1 {
text-shadow: 0 1px 0 #fff;
color: #292929;
}
如下代码为使用text-shadow的简单示例：
<style type="text/css">
div{
text-shadow:5px -10px 5px red;
color:#666;
font-size:16px;
}
</style> 严格来说 text-shadow不能算是css3的属性。实际上在css2.0时就已经有这个属性。不过不能被浏览器广泛支持。随着html5和css3的兴起。text-shadow也跟着受到重视。text-shadow的作用是在不使用图片的情况下，通过设置阴影或者模糊字体来增加文字的质感。
在html5和css3迅速推广的今天，掌握text-shadow这个简单的属性可以说是势在必行了。
常见的效果实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>textshadow</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<style>
h2 {margin:0;padding:0;text-align:center;padding:10px 0;background-color:#ccc;}
.sp1 {color:#fff;text-shadow: 0 0 20px red;}
.sp2 {text-shadow: -1px -1px white, 1px 1px #333;color:#ccc;}
.sp3 {text-shadow: 1px 1px white, -1px -1px #777;color:#ccc;}
.sp4 {color: transparent; text-shadow: 0 0 3px #f96;}
.sp5 {color: transparent; text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;}
.sp6{color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),
-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);}
</style>
</head>
<body>
<h2 class="sp1">设置多个阴影</h2>
<h2 class="sp2">设置多个阴影</h2>
<h2 class="sp3">设置多个阴影</h2>
<h2 class="sp4">设置多个阴影</h2>
<h2 class="sp5">设置多个阴影</h2>
<h2 class="sp6">设置多个阴影</h2>
</body>
</html>示例2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#text
{
text-shadow:2px 2px 0px orange;
}
#text1
{
text-shadow:2px 2px 5px orange;
}
#text2
{
text-shadow:2px 2px 5px orange,-2px 2px 5px green;
}
/*]]>*/
</style>
</head>
<body>
<div id="text">
没有阴影</div>
<div id="text1">
有阴影
</div>
<div id="text2">
阴影叠加
</div>
</body>
</html>
