CSS 给文字加阴影

kevin-ying

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 |  none | [, ] *  或none |  [,  ]*也就是：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)]...
取值:
：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
：指定阴影颜色，也可以是rgba透明色
：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。
如下图所示：

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

我们来看个实例
首先给所有的DEMO一个公用的样式和类名：
.demo {background: #666666;width: 440px;padding: 30px;font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;color: #fff;text-transform: uppercase;}接下来我们在每个Demo上加上自己特定的样式，分别如下所示：
.demo1 {text-shadow: red 0 1px 0;}

效果是不错，可是让我们头痛的是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需要加上这个公用的样式：
.demo {background: #666666;width: 440px;padding: 30px;font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;color: #fff;text-transform: uppercase;}效果一：Glow and Extra Glow effect(也就是NEON effect)
.demo2 {text-shadow: 0 0 20px red;}

辉光效果，我们设置比较大的模糊半径来增加其辉光效果，你可以改变不同的模糊半径值来达到不同的效果，当然你也可以同时增加几个不同的半径值，创造多种不同的阴影效果。就如下面的NEON效果。
.demo3 {text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}

效果二：Apple Style Effect
.demo4 {color: #000;text-shadow: 0 1px 1px #fff;}

效果三：Photoshop Emboss Effect
.demo5 {color: #ccc;text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意，其模糊值一定要设置为0，使文本不具有任何模糊效果，主要用来增加其质感，你也可以像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友可以自己尝试一下。
效果四：Blurytext Effect
.demo6 {color: transparent;text-shadow: 0 0 5px #f96;}

用text-shadow制作模糊的效果主要要注意一点就是，把文本的前景色设置为透明transparent,如果模糊值越大，其效果越糊糊；其二，我们不设置任何方向的偏移值。如果结合前面的photoshop emboss效果，可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。
我们结合前面的Photoshop Emboss效果，我们可以制作出一个带有模糊的浮雕效果：
.demo7 {color: transparent;text-shadow:0 0 6px #F96, -1px -1px  #FFF, 1px -1px  #444;}

效果五：Inset text effect
.demo8 {color: #566F89;background: #C5DFF8;text-shadow: 1px 1px 0 #E4F1FF;}

这种效果需要注意以：文字的前景色要比背景色暗，阴影颜色稍比背景色亮一点点，这一步很重要，如果阴影色太亮看起来会怪，如果太暗将没有效果显示。具体实现可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常见的一种效果，阴影是同一个小偏移量给人一种微妙的突出效果。
效果六：Stroke text effect
.demo9 {color: #fff;text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96;}

描边效果跟我们在Photoshop相比，我承认效果差很多，出现断点，但有时还是可以试用达到一种特殊的描边效果，其主要运用两个阴影，第一个向左上投影，而第二向右下投影，还需注意，制作描边的阴影效果我们不使用模糊值。
效果七：3D text effect
.demo10 {color: #fff;text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);}

我们换过投影方向可以制作出另外一种3D文字效果
.demo11 {color: #fff;text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);}

3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作出3D效果。同时我们层数越多，其越厚重。换成用text-shadow制作就是使用多个阴影，并把阴影色设置相同，给其使用rgba色效果更佳，如上面的实例。
效果八：Vintge/Retro text effect
.demo11 {color: #eee;text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;}

Vintage retro这种风格的文字效果是由两个文本阴影合成的，这里需要注意的是：第一个阴影色和背景色相同；文本前景色和第二个阴影色相同
效果九：Anaglyphic text effect
.demo13 {color: rgba(255, 179, 140,0.5);text-shadow: 3px 3px 0 rgba(180,255,0,0.5);}

anaglyphic文字效果起到一种补色的效果，从而制作出一种三维效果图。其效果是用css重新使用的文字阴影和文本前景的rgba色组合而成。在文本的前景色和阴影上同时使用rgba色，使底

kevin-ying

支持幾乎所有瀏覽器的文字背景(除IE6)

1. filter:glow(color=#000000,strength=1); text-shadow:0 1px 3px rgba(33,33,33,.7);

复制代码

选择器{Filter：Glow（color=颜色值，strength=数值）}
其中：color的值用来指定晕圈效果的颜色；strength值用来指定晕圈的强度范围，其值为1到255，数值越大效果越强。

GLOW滤镜作用于文字时，效果特别明显。对于一般的图片只是在其边缘加上光晕，而作用于具有透明背景的GIF格式图片时，将忽视背景，直接将效果作用在图象的主体上。

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)]...

其中，rgba是 CSS3 中的属性，
rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。

推薦字體顏色:#ff1493；#228b22； #4169e1； #9400d3；#ff0000；#daa520

kevin-ying

更多用法

在任何需要设置颜色的地方都可以使用RGBA，例如：

1. div {
   
2. color: rgb(0, 0, 0);
   
3. background-color: rgb(255, 255, 255);
   
4. border: 10px solid rgba(255, 255, 255, 0.3);
   
5. }

复制代码

为所有div设置透明度为30%线宽为10px的白色实线边界。

1. div {
   
2. color: rgba(255, 255, 255, 0.8);
   
3. background-color: rgba(142, 213, 87, 0.3);
   
4. }
   
5. div:hover {
   
6. color: rgba(255, 255, 255, 1);
   
7. background-color: rgba(142, 213, 87, 0.6);
   
8. }

复制代码

鼠标滑过改变透明度。

另外如果和JavaScript配合的话，RGBA属性可以创造出更加炫目的效果。

改变你的CSS编写习惯

在以上的例子中你可以看到作者一直在使用rgb()去指定颜色，而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性准备的写法，用rgb()指定颜色可以理解为rgba()不透明，但两者的差别非常小，这会对将来升级到rgba()带来很大的方便。

兼容所有浏览器

虽然目前主流浏览器的最新版本都已经支持RGBA属性，但我们还必须照顾使用旧版浏览器的用户，因此在某些地方我们用老方法会保险一些。方法也有好几种，大家按需选择。

1.低版本不使用RGBA属性

虽然这会影响在低版本浏览器里的效果，但这是最简单的方法，也是最保险的方法，具体操作如下：

1. h1 {
   
2. color: rgb(127, 127, 127);
   
3. color: rgba(0, 0, 0, 0.5);
   
4. }

复制代码

先设置rgb颜色在设置rgba颜色，这样不支持rgba属性的浏览器只会显示rgb颜色，而支持rgba的浏览器因为重定义的作用会显示rgba颜色。

2.使用透明的PNG图片做背景

PNG格式的优点在于图片里的透明特性可以在网页里呈现出来，这里就用到了这个特点。

1. h1 {
   
2. background: transparent url(black50.png);
   
3. background: rgba(0, 0, 0, 0.5) none;
   
4. }

复制代码

通过透明度为50%的PNG背景达到了和rgba一样的效果。

3.IE hack

对IE6和IE7可以用IE的私用属性来解决，可达到部分和rgba一样的效果。

1. h1 {
   
2. filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#80000000′, EndColorStr=’#80000000′);
   
3. }

复制代码

我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。

后记

本文译自《Working With RGBA Colour》，本人做了修改，主要是觉得原文的排版表达有的不是很好，并且增加了IE的hack。

kevin-ying

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.

最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.


text-shadow是什么?
text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.text-shadow是什么?
text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.
接下来看看text-shadow的语法:

[CSS] 纯文本查看 复制代码

text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)
举个例子:

[CSS] 纯文本查看 复制代码

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a
一些试验与demo
我做了点小小的试验,做成了一个 Demo页面 .为了让浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

kevin-ying

利用CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。

浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。

text-shadow: 0 1px 0 #eee; 凹进效果

text-shadow: 0 -1px 0 #123; 凹进效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #123; 凸出效果 -

阴影文字和发光文字

一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

多重阴影
在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。

text-shadow: 1px 2px 3px #888; 杯具了

这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

kevin-ying

兼容性问题解决方案

css3的出现让人们有了更多的选择，其中的text-shadow:length length length color

第一个length指阴影离开文字的横向距离

第二个length指阴影离开文字的纵向距离

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

color指阴影的颜色

很好用，但是在日常工作中真的能非常好的使用吗？对于很多要考虑IE的人来说，如果仅是渐进增强的效果的话，倒是没什么问题，但是如果必须要考虑IE呢？

早前从网上看到一个关于IE的css3效果插件ie-css3.htc（CSS3 support for Internet Explorer 6, 7, and 8，要了解此插件使用方法可以查看关于ie-css3.htc的使用方法一文）,这可以解决这个问题，经过实验可以达到效果,但是又极可能产生一些意想不到的问题，对于个人小站的话也许没什么问题，但是如果网站较大的话，那就不是一个很好的选择了。

由于除IE外的其他浏览器基本支持text-shadow，所以问题就是怎么解决IE下的阴影问题了，滤镜的使用。

[CSS] 纯文本查看 复制代码

filter:Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=-1,color=#ffffff)
Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，Positive=positive） 

该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。

Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。

相对与上面使用插件的方法，虽然使用滤镜会导致一些性能问题，但是不会有其他因此引起的问题，在某些必要的情况下也不失为一个好方法。