在css2时代，如果文字制作了特殊的样式，比如图层样式之阴影发光等效果，必须把该文字保存为图片才能展示在网站上。

而css3新增的text-shadow属性，可以轻松实现文字投影、发光、内阴影等很棒的立体效果，具体效果如图：

查看案例

1、text-shadow语法结构

text-shadow:length length length color

第一个length：阴影水平偏移距离

第二个length：阴影纵向偏移距离

第三个length：阴影的模糊半径

color:阴影的颜色

如果掌握了ps的图层样式，知道如何设置投影、内阴影、描边、发光等样式，是比较容易理解该语法结构的。

最最关键的是，可以设置多个阴影，这个太棒了。

2、html结构，so easy!

<h1>MRSZHAO.COM</h1>
<h2>css text shadow</h2>
<h3>CSS Shadow Effect</h3>
<h4>CSS OUTLINE</h4>
<h5>CSS light</h5>
<p><a href="http://www.mrszhao.com">赵老师前端教学博客</a></p>

3、核心CSS3样式

body{
	background-color:#666;
	text-align:center;
	font:40px/1 Arial, Helvetica, sans-serif;
	color:#333;
	}
h1{
	color:#222;
	font-size:2em;
	text-shadow:0px 1px 0px #999;/*y坐标向下有1像素的偏移量。该效果核心是颜色搭配，文字暗色，阴影亮色。*/}
h2{
	color:#ccc;
	text-shadow:0 0 10px #333;/*x，y坐标没有偏移量，只有10px的模糊值。*/}
h3{
	font-size:2em;
	color:#3e3e3e;
	text-shadow:-1px -1px #000,1px 1px #999;/*第一个是向上向左偏移1px的暗面，第二个是向下向右偏移1px的亮面。亮面和暗面刚好相反。*/
	}
h4{
	color:#999;
	font-size:1.5em;
	text-shadow:2px 0 0 #000,0 2px 0 #000,-2px 0 0 #000,0 -2px 0 #000;}
/*x,y坐标正反四个方向都是一样的投影，产生描边效果*/
h5{
	color:#eee;
	font-size:1.6em;
	text-shadow:0 0 10px #F90,0 0 30px #F06;/*x,y没有偏移值，颜色有模糊值，可以定义多个效果，多个颜色可以叠加。*/
	
	}

如果想制作出够棒的效果，需要有一定的素描功底，至少理解什么是亮面，什么是暗面，对色彩的搭配也要有一定的认识。色彩的明度变化可以体现立体感。

可见知识都是要融会贯通的！