CSS3的文字阴影—text-shadow

在css3的text-shadow还没再次出现时，我们在页面结构设计中阴霾通常都是用photoshop弄成相片，那时有了css3能间接采用text-shadow特性来选定阴霾。那个特性能有三个促进作用，造成阴霾和模糊不清市场主体。这种在不采用相片并能给文本减少层次感。

text-shadow曾在css2中就再次出现过，但在css2.1版中又扎格列，那时css3.0版又再次留下来了。这表明text-shadow这个特性十分值得称赞他们做后端的相关人员倚重。那时许多工程项目中，css3有许多特性被后端技师们采用了，我在后面也依次如是说过css3中的蓝紫色，有效性，梯形四个特性的采用，所以css3那么多特性中，我对个人真的text-shadow利用得是最多的两个特性，做为他们后端相关人员我真的有必要性自学并掌控那个text-shadow特性。

语法:

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是： text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur)]… 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur) 颜色(Color)]…

取值:

<length>：长度值，能是负值。用来选定阴霾的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值

<color>：选定阴霾颜色，也能是rgba透明色

<shadow>：阴霾的模糊不清值，不能是负值，用来选定模糊不清效果的促进作用距离。

如下图所示：

表明：

能给两个对象应用一组或多组阴霾效果，方式如后面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴霾的水平偏移距离，其值为正值时阴霾向右偏移，如果其值为负值时，阴霾向左偏移；Y-Offset是指阴霾的垂直偏移距离，如果其值是正值时，阴霾向下偏移反之其值是负值时阴霾向顶部偏移；Blur是指阴霾的模糊不清程度，其值不能是负值，如果值越大，阴霾越模糊不清，反之阴霾越清晰，如果不需要阴霾模糊不清能将Blur值设置为0；Color是指阴霾的颜色，其能采用rgba色。

浏览器的兼容性：

他们来看个实例

首先给所有的DEMO两个公用的样式和类名：

接下来他们在每个Demo上加上自己特定的样式，依次如下所示：

效果是不错，可是让他们头痛的是IE是不支持text-shadow效果，但为了在兼容这一问题，他们只好采用滤镜filter:shadow来处理（本人不提倡采用滤镜）。filter:shadow滤镜促进作用与dropshadow类似，也能采用对象造成阴霾效果，不同的是shadow可造成渐近效果，采用阴霾更平滑实现。

滤镜语法：

E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

其中E是元素选择器，Color用于设定对象的阴霾色；Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。

他们先不管IE下的效果了，我对个人认为text-shadow利用好了，也能像photoshop一样制作出十分好的效果，下面我这里罗列出一些比较好看的实例以供我们参考

注：下面所有的Demo需要加上那个公用的样式：

效果一：Glow and Extra Glow effect(也就是NEON effect)

辉光效果，他们设置比较大的模糊不清半径来减少其辉光效果，你能改变不同的模糊不清半径值来达到不同的效果，当然你也能同时减少几个不同的半径值，创造多种不同的阴霾效果。就如下面的NEON效果。

效果二：Apple Style Effect

效果三：Photoshop Emboss Effect

效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很类似他们 photoshop中的投影和浮雕效果的呀。应用这三个效果我们一定要注意，其模糊不清值一定要设置为0，使文本不具有任何模糊不清效果，主要用来减少其层次感，你也能像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友能自己尝试一下。

效果四：Blurytext Effect

用text-shadow制作模糊不清的效果主要要注意一点就是，把文本的前景色设置为透明transparent,如果模糊不清值越大，其效果越糊糊；其二，他们不设置任何方向的偏移值。如果结合后面的photoshop emboss效果，能让你等到不同的效果。提醒一下opera浏览器不支持那个效果。

他们结合后面的Photoshop Emboss效果，他们能制作出两个带有模糊不清的浮雕效果：

效果五：Inset text effect

这种效果需要注意：文本的前景色要比背景色暗，阴霾颜色稍比背景色亮一点点，这一步很重要，如果阴霾色太亮看起来会怪，如果太暗将没效果显示。具体实现可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常见的一种效果，阴霾是同两个小偏移量给人一种微妙的突出效果。

效果六：Stroke text effect

描边效果跟他们在Photoshop相比，我承认效果差许多，再次出现断点，但有时还是能试用达到一种特殊的描边效果，其主要利用三个阴霾，第两个向左上投影，而第二向右下投影，还需注意，制作描边的阴霾效果他们不采用模糊不清值。

效果七：3D text effect

他们换过投影方向能制作出另外一种3D文字效果

3D文本效果利用原理就是像Photoshop一样，他们在文本的下方或上方复制了多个图层，并把每两个层向左上或右下方向移动两个1px距离，从而制作出3D效果。同时他们层数越多，其越厚重。换成用text-shadow制作就是采用多个阴霾，并把阴霾色设置相同，给其采用rgba色效果更佳，如上面的实例。

效果八：Vintge/Retro text effect

Vintage retro这种风格的文本效果是由三个文本阴霾合成的，这里需要注意的是：第两个阴霾色和背景色相同；文本前景色和第二个阴霾色相同

效果九：Anaglyphic text effect

anaglyphic文本效果起到一种补色的效果，从而制作出一种三维效果图。其效果是用css再次采用的文本阴霾和文本前景的rgba色组合而成。在文本的前景色和阴霾上同时采用rgba色，使底层的文本是通过影子可见。

上面我主要列出了九个不同效果的实例，当然我们能改变各种方式制作出一些特殊的效果，也再一次证实CSS3中的text-shadow实力是不浅的，希望我们能喜欢上那个特性，并能更好的采用那个特性。虽然那时IE不支持，但我们不要惧怕采用CSS3，因为他们做后端的迟早都会需要掌控这些新技术的。