CSS3小分队--text分身text-shadow_html/css_WEB-ITnose

上一篇：《CSS3小分队??进击的border-radius》

上一篇把border-radius拉上台走了个秀，今天我们轮着角色接着走。台下一团shadow在蠕动，恩，今天上台的是一个shadow属性。关于shadow的属性有两个：box-shadow和text-shadow，今天我们说的是text-shadow先。

一、shadow阴影的背后

text-shadow在CSS2中出现过，可是昙花一现，在CSS2.1中又被抛弃了，现在这团阴影又在CSS3中满血归来。

顾名思义，text-shadow是用来给文字添加阴影效果的。在网页上我们会看到各种各样绚丽的文字阴影效果，也许我们会问这些个效果是怎么做到的，用text-shadow设置的话应该怎么取值，为什么要这样取值而不是那样取值。

回答这些问题其实并不难，首先我们得先明白，text-shadow到底是个什么东西。

也许有小伙伴会说，text-shadow不就是text-shadow不就是文字阴影吗，这有什么可说的。这不能说不对，而我要说的并不是这个，我想让小伙伴明白的是：

text-shadow就是文字的一个副本。看下图：

 

白色文本为文本本体，红色文本为文本阴影，阴影就是本体的一个副本一个分身。

text-shadow是被修饰文字的一个副本，是被修饰文字的一个分身，俗话就是：如果不对阴影进行修饰的话，文字阴影就是文字一模一样的一个分身。记住了这句话，讲非常有助于我们理解不同的文字阴影效果应该怎么给text-shadow取值。

二、关于text-shadow属性的取值特点

首先有必要看一下text-shadow的语法：

text-shadow: h-shadow v-shadow blur color;

h-shadow是指水平阴影的位置，即水平偏置，允许负值。值为正时，阴影向右偏移，值为负时，阴影向左偏移；

v-shadow是指垂直阴影的位置，即垂直偏置，允许负值。值为正时，阴影向底部偏移，值为负时，阴影向顶部偏移；

blur是指模糊距离，即模糊的范围大小；

注：要充分理解blur的含义，请猛戳这里这里看第三节的第二个实现。

color阴影颜色。

其中，h-shadow和v-shadow是必选项，blur和color是可选项。

text-shadow可以为文字添加一个或多个阴影，添加多个阴影的时候阴影列表需要用逗号隔开。

在正式讲解text-shadow属性取值方法之前，先说几点我自己对text-shadow的理解：

1、blur值越大，阴影越模糊；再注：要充分理解blur的含义，请猛戳这里这里看第三节的第二个实现。

2、透明transparent也可以当成一种color；

3、文本副本的叠加能实现成排的效果；

4、多种颜色的叠加会造成特殊的视觉特效；

三、从原理出发理解阴影特效的实现

下面以实例来讲解如何从原理出发根据自己的想法来实现相应的效果。首先，先把一段文字demo贴上：

HTML Markup：

  <div class="text_demo">    text demo  </div>

CSS Code：

.text_demo{  background: #666666;  width: 400px;  height: 200px;  font-size: 60px;  line-height: 200px;  text-align: center;  font-weight: bold;  text-transform: uppercase;  color: #ffffff;}

DEMO 效果：

注：以下实例都是在该实例上做了简单的修改。

1、辉光效果

辉光效果应该都见过，这是一个比较常见的效果。以防万一先把效果贴上：

辉光效果很简单，从效果图上可以看到，文字没有位置偏移，只是加上了一个模糊的副本而已，所以text-shadow实现很简单：

CSS Code：

text-shadow: 0 0 25px #ff0000;

2、模糊效果

先上效果图：

该效果和上面的辉光效果有一定的相似，所以有的小伙伴可能会有以下想法：不就是文字颜色和阴影颜色为同一种颜色就行嘛，所以该小伙伴的实现可能如下：

color: #ff2200;text-shadow: 0 0 8px #ff2200;

那效果呢：

效果明显不一样，这其实是一个辉光效果。该小伙伴错误的原因是没有理解blur的概念。blur是模糊整个阴影，也就是模糊文本的整个那个副本，而不是仅仅给副本添加一个模糊的边缘。所以我们想要实现的效果是这样的：不要文本实体，只要一个模糊的文本副本。而该小伙伴错就错在了：他在这个模糊的文本副本上又叠加上了该文本实体，让本来模糊的部分又清晰出来了。所以正确的实现如下：

color: transparent;text-shadow: 0 0 8px #ff2200;

将文本前景色设为透明，说白了就是不要文本实体，只要一个模糊的文本副本。

3、描边效果

描边效果可以先想象下效果，描边描边，自然是用线条把文本从边缘描一遍，所以实现方法也非常简单：给文本加上两个阴影，一个是在文本左上边缘加上阴影（即，把文本副本往左上移动1px），另一个是在文本右上边缘加上阴影（即，把文本副本往右上移动1px），因为仅仅是描上一条细细的边，所以自然用不上blur，实现及效果如下：

color: #ffffff; text-shadow: 1px 1px 0 #ff0000 , -1px -1px 0 #ff0000;

当然该描边效果也有缺陷，那就是并不是完全的描边，我们放大看一下：

放大后会看到斜对角处并没有描边有断点，原因也很简单，两个文本副本分别向左上和右下偏移，自然会在斜对角处分开。毕竟和专业的修图软件相比该效果也只能算是停留在实现的程度上。

4、3D文本效果

3D文本效果其实和描边效果实现思路有些相似，只是换成了单方向添加多个阴影，稍微想想就会明白，其实就是把多个文本副本依次小余量地往外叠加即可，叠加的越多，3D出来的部分越多。

所以实现如下：

color: #ffffff;text-shadow: 1px 1px #cccccc,2px 2px #cccccc,3px 3px #cccccc,4px 4px #cccccc,5px 5px #cccccc,6px 6px #cccccc;

当然也可以反向投影，实现如下：

color: #ffffff;text-shadow: -1px -1px #cccccc,-2px -2px #cccccc,-3px -3px #cccccc,-4px -4px #cccccc,-5px -5px #cccccc,-6px -6px #cccccc;

5、里特罗复古风格

这是一个很有层次感和历史感的风格，先上效果图：

其实看完效果图，小伙伴们应该很快就会想到实现方法：两个阴影实现，一个阴影和背景色相同，一个阴影和文字前景色相同。Bingo，实现确实如此。

color: #ffffff;text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

四、小了个结

当然用text-shadow还能做出很多种文本特效，只要理解了四个参数的含义，并充分利用阴影的偏移、模糊范围和颜色的变换，就能做出很多很出色的特效。

如果还有很棒的shadow特效，欢迎分享~~~~

上一篇：《CSS3小分队??进击的border-radius》