CSS3新增text-shadow轻松实现文字阴影效果

在以前，如果想给文字加上特殊的样式，比如发光、阴影等效果，就必须用PS把文字保存为图片才能在网页上正常显示。

而CSS3新增的text-shadow属性，可以轻松实现文字投影、发光、内阴影等很棒的立体效果，而且效果自然，不逊于PS制作出的效果。具体效果如图：

一、text-shadow的语法

按照惯例，先把w3c的官方文档看一遍： CSS3 text-shadow 属性

• text-shadow: none|h-shadow v-shadow blur color;

none：无阴影，默认值。

h-shadow:设置对象的阴影水平偏移值。可以为负值

v-shadow:设置对象的阴影垂直偏移值。可以为负值

blur:设置对象的阴影模糊值。不允许负值，可以缺省。

color:设置对象的阴影的颜色。 可以缺省。缺省的时候默认是#333深灰色，不是黑色。

在学习各种效果之前，我认为你应该明白，阴影核心其实是对原来对象的复制

比如我复制了两个原对象，并设置了它的偏移值、 模糊值和颜色。

.ts1{
    text-shadow:10px 20px 1px #666,20px 40px 3px #999;}

下面来看看 text-shadow强大的立体效果。

先为所有demo统一设置样式：

.demo{
    width:400px;
    padding:30px;
    background-color:#ccc;
    font:bold 50px/2 "microsoft Yahei";
    color:#333;
    text-transform:uppercase;
    margin-bottom:20px;}

1、最常见的大量文字段落的简单阴影效果

.ts2{
    font-size:16px;
    text-shadow:0 1px #eee;
    color:#121212;}
.ts3{
    background-color:#666;
    color:#eee;
    font-size:16px;
    text-shadow:0 1px #121212;}

这样的阴影要求是简单有质感，重点是黑白灰的反差对比产生效果。文字深色，背景亮色，阴影比背景更亮一点。文字亮色，背景深色，阴影比背景更深一点。需要看起来若有若无，但是比没有又更有细节上的质感。这种效果仅需要y坐标向下移动1px，水平和模糊都没有。

2、常见的x、y正向偏移文字阴影效果

.ts4{
    background-color:#ddd;
    color:#fff;
    text-shadow:2px 2px #777;
}

3、凸起的效果，有点像轻微的浮雕

.ts5{
    text-shadow:-1px -1px #fff,1px 1px #333;
    color:#ccc;
    background-color:#888;}

高光在左上，暗面在右下，所以高光x、y都是负值，暗面x、y为正值。切换高光和暗面的正负可以产生相反的凹效果。如果熟悉ps的样式面板会更好理解。知识都是相通的。还有一点，就是颜色的对比。

4、凹下去的效果，和凸出的效果刚好相反。

.ts6{
    font-family:Verdana, Geneva, sans-serif;
    color:#666;
    text-shadow:-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;}

做了两层，看起来凹的更厉害。关键就是阴暗面在左上，亮面在右下。

5、文字阴影半透明立体效果

.ts7{
    font-family:Tahoma, Geneva, sans-serif;
    color:rgba(203,29,77,.5);
    text-shadow:-5px -5px rgba(70,232,240,.5);}

关键是利用rgba的半透明效果，实现了叠加。

6、3D立体效果

.ts8{
    background-color:#333;
    color:#1C9F96;
    text-shadow:1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;
}

做3D效果的关键是阴影一层一层的叠加，也就是复制一个又一个的对象，每一次的偏移比上次的多1px，颜色完全一样。负值可以产生反方向的3D效果。

7、仿古体字效果

.ts9{
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#eee;
    background-color:#666;
    text-shadow:5px 5px #666,7px 7px #eee;}

效果的核心就是第一个阴影颜色和背景色一样，第二个阴影颜色和文字颜色一样。

8、荧光棒效果

.ts10{
    background-color:#000;
    color:transparent;
    text-shadow:0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;}

关键点是文字使用的 transparent透明色，所以文字本身不见了，通过白色描边，再前后加上了一定模糊的阴影，好像夹心饼干一样。

9、利用 opacity实现半透明花纹字体

body{
    background:url(images/body_bkg.png);}
.ts11{
    background-color:#222;
    color:#333;
    opacity:.4;
    text-shadow:-1px -1px rgba(255,255,255,.3),1px 1px rgba(0,0,0,.8);
}

文字和背景颜色一致，高光和阴暗面采用了rgba的方式，对白色和黑色用了透明度的效果，更柔和，再利用 opacity可以实现半透明的效果，看到了背景的花纹图片。

10、文字描边样式

如果使用阴影来描边文字，会发现文字的转折处都有断点，稍微不好看。

.ts12{
    color:#fff;
    text-shadow:-1px 0 #666,0 -1px #666,1px 0 #666,0 1px #666;
}

有一个webkit前缀的专用属性 text-stroke,可以实现为文字描边，但是这个属性是 -webkit-私有的，火狐还有IE类的浏览器是不支持的。

.ts12{
    color:#fff;	
    -webkit-text-stroke:1px #666;/*文字描边*/
}

可以发现利用 text-stroke描边文字是没有断点的。

11、3D渐变模糊投影

.ts13{
    color:#0DCFDF;
    text-shadow: 0 0 2px #686868,0 1px 1px #ddd, 0 2px 1px #d5d5d5, 0 3px 1px #ccc, 0 4px 1px #c5c5c5,
    0 5px 1px #c1c1c1, 0 6px 1px #bbb, 0 7px 1px #777,0 8px 3px rgba(100,100,100,0.4),0 9px 5px rgba(100,
    100,100,0.09),0 10px 7px rgba(100,100,100,0.14),0 11px 9px rgba(100,100,100,0.2),0 12px 11px rgba(100,100,
    100,0.24),0 13px 15px rgba(100,100,100,0.29);
    background-color:#fff;
}

此3D投影相比与纯色的3D投影，看起来更有立体和阴影的质感。只是颜色由浅入深，慢慢增加模糊值，对深色使用了rgba半透明度，可以叠加的更加柔和立体。

综上所述，文字的阴影效果其实就是一层一层的复制叠加，可以为一个复制出来的对象设置偏移值和模糊值，还有颜色。

多观察，多思考，多练习，根据具体的网页需求设计出不同的文字效果，为网页效果增添光彩。