css text-shadow 可以给文字增加阴影效果，它和 css box-shadow 盒子阴影效果有点类似。

通过它可以在不借助于ui设计人员的情况下，做出一些比较好看的字体，比如让文字发光。

语法

box-shadow:X轴偏移量(h-shadow) Y轴偏移量(v-shadow) 模糊半径(blur) 颜色(color)

属性

属性说明
h-shadow这个值必须的，表示水平阴影的位置，允许负值
正值阴影在右边，负值阴影在左边，0的时候阴影中文字后面，看不见的，如果有blur值会有模糊效果
v-shadow

这个值也是必须的，表示竖直阴影的位置，允许负值

正值阴影在下面，负值阴影在上面

blur非必须，表示模糊距离，值越大，阴影越模糊
color非必须，阴影的颜色，默认值为黑色

前两个属性是必须写的。其余的可以省略； 

控制阴影左右显示使用h-shadow，控制阴影的上下显示使用v-shadow ； 

阴影的颜色使用color。 

另外可以给一个对象使用多个阴影，中间用逗号隔开即可，这样可以做出发光效果的阴影。

例子

 <!DOCTYPE html>
<html>
<title>css text-shadow 文字阴影属性例子</title>
<head>
<style>
	div
	{
	   float:left;
	   margin-left:20px;
	   margin-top:10px;
	   color:#2F4F4F;
	   width:150px;
	   height:100px;
	   background-color:yellow;
	   text-align:center;
	}
	.div1{ text-shadow: 2px 2px;}
	.div2{ text-shadow: 2px 2px 4px;}
	.div3{ text-shadow: 2px 2px 4px red;}


</style>
</head>
<body>
<div class="div1">2个值</div>
<div class="div2">3个值<br>增加了模糊度</div>
<div class="div3">4个值<br>增加了颜色</div>


</body>
</html>
效果如下：

css text-shadow 文字阴影效果

再看一个发光效果的文字阴影。

 <!DOCTYPE html>
<html>
<title>css text-shadow 发光效果的阴影</title>
<head>
<style>
	div
	{
	      background: #666;
		  width: 440px;
		  padding: 30px;
		  color: #fff;
		  font-size:36px;

	}
	.div1{   
		text-shadow: 
			0 0 5px #fff, 
			0 0 10px #fff, 
			0 0 15px #fff, 
			0 0 20px #DC143C, 
			0 0 25px #DC143C;
	}

</style>
</head>
<body>
<h3>yxjc123.com 文字阴影例子</h3>
<div class="div1">发光效果的阴影</div>


</body>
</html>
css text-shadow 文字阴影效果