CSS 文字发光效果

CSS 文字的发光效果通过 text-shadow 实现起来很方便的。

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

1px 0 1px #aaa:第一个参数是向右偏移量，第二个参数是向下偏移量，第三个参数是模糊程度（数值越大越模糊），第四个参数是颜色

可以叠加

?

1 2	text-shadow : 1px 0 1px #8B4513 , 0 1px 1px #8B4513 ,      0 -1px 1px #8B4513 , -1px 0 1px #8B4513 ;

在 Firefox, Chrome, Opera, Safari 中的效果：

看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。

几经尝试，终于找到可以让 Chrome 也一样表现犀利的办法。通过观察可以得知在无模糊的情况下，也就是文本描边效果，各浏览器里的表现是一致的。

?

1 2	text-shadow : 1px 0 #8B4513 , 0 1px #8B4513 ,      0 -1px #8B4513 , -1px 0 #8B4513 ;

而又知道，shadow 效果是可以叠加的，于是就得出以下的写法，在描边 + 发光。

?

1 2 3 4

text-shadow : 1px 0 0 #8B4513 , 0 1px 0 #8B4513 ,      0 -1px 0 #8B4513 , -1px 0 0 #8B4513 ,      1px 0 1px #8B4513 , 0 1px 1px #8B4513 ,      0 -1px 1px #8B4513 , -1px 0 1px #8B4513 ;

还有一点要注意的，必须是先描边，再发光。反过来，效果惨不忍睹。下图。

搞不清楚怎样的效果才是标准的，但 Chrome (测试用版本为 8.0.552.210 beta)目前的实现视觉上是不行的。

上面忽略 IE 的情况。IE 是可以通过滤镜来实现的。不过由于 dropshadow 没有 blur 选项，实际效果只有描边没有发光。

?

1 2 3 4

filter: Dropshadow(offx = 1 , offy = 0 , color = #8B4513 )      Dropshadow(offx = 0 , offy = 1 , color = #8B4513 )      Dropshadow(offx = 0 , offy = -1 , color = #8B4513 )      Dropshadow(offx = -1 , offy = 0 , color = #8B4513 );