text-shadow定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了，但是在css3中又重新定义了，并且增加了不透明度的效果。
基本语法
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?默认值：无
适用于：所有元素
动画性：是，除了内、外阴影切换时
计算值：指定值
取值：
none： 无阴影<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值<color>： 设置对象的阴影的颜色。inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
Demo和Demo源码
Demo地址：http://weber.pub/demo/160925/text-shadow.html
Demo源码：http://pan.baidu.com/s/1sl0A5pr 密码：a0qh
解释
先上代码
<style>
p{
font-size: 50px;
font-weight: 900;
}
.p1{
text-shadow: 3px 3px red;
}
.p2{
text-shadow: 3px 3px 5px red;
}
</style>
<p class="p1">weber.pub</p>
<p class="p2">weber.pub</p>
从上面的例子中可以看出 text-shadow 属性的第一个值表示水平位移，第二个表示垂直位移，第三个表示模糊半径（可选），第四个表示阴影颜色（可选）
实例
1、复杂文本特效
实现一个文本的多重阴影效果
<style>
.p3{
text-shadow: 3px 3px 5px #17bebb,
15px 15px 5px #a8be11,
27px 27px 5px #be1411;
}
</style>
<p class="p3">weber.pub</p>效果图如下
2、静态火焰效果
根据不同的偏离值模糊程度，再加上我们设定合适的颜色值，就可以利用 text-shadow 来做出类似火焰的效果。
<style>
.p4{
background: #000000;
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
<p class="p4">weber.pub</p>
3、会动的火焰效果
根据css3的动画然后让text-shadow属性变化来实现的效果（css样式只展示在 chrome 浏览器的，兼容其他浏览器的css样式，可下载源码）
<style>
.p5{
background: #000000;
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
animation: ts 3s;
-moz-animation: ts 3s;
-webkit-animation: ts 3s;
-o-animation: ts 3s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes ts{
0% {
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
40% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
2px -15px 10px #fd3,
-4px -20px 15px #f80,
2px -30px 22px #f20;
}
50% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
4px -15px 10px #fd3,
-2px -20px 15px #f80,
4px -30px 22px #f20;
}
60% {
text-shadow: 0 0 5px #fff,
0 -8px 8px #ff3,
-2px -15px 10px #fd3,
-2px -20px 15px #f80,
-2px -30px 22px #f20;
}
100% {
text-shadow: 0 0 5px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
}
<style>
<p class="p5">weber.pub</p>暂时没有找到好用的可以制作gif图片的工具，所以就没有图片了，求推荐。。。
4、凸出立体文本效果
通过在文本的左上角和右下角各添加一个像素的错位补色阴影，可以实现一种立体效果。
<style>
.p6{
color: #17bebb;
background: #17bebb;
text-shadow: -1px -1px #fff,
1px 1px #333;
}
</style>
<p class="p6">weber.pub</p>
5、内凹立体文本效果
和上面的案例原理相同
<style>
.p7{
color: #ccc;
background: #ccc;
text-shadow: 1px 1px #fff,
-1px -1px #333;
}
</style>
<p class="p7">weber.pub</p>
6、文本描边效果
分别对文本的4个边添加1像素的实体阴影
<style>
.p8{
color:#fff;
text-shadow: -1px 0 #17bebb,
0 1px #17bebb,
1px 0 #17bebb,
0 -1px #17bebb;
}
</style>
<p class="p8">weber.pub</p>
7、文本外发光效果
<style>
.p9{
text-shadow: 0 0 5px red,
0 0 5px #291717;
}
</style>
<p class="p9">weber.pub</p>
