CSS文字阴影效果

上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考：http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <h2 id="test4">4 : This is heading with text-shadow 中文标题</h2> <h2 id="test5">5 : Multiple shadows are Hot</h2> </div> </body> </html>

提示：你可以先修改部分代码再运行。

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影IE滤镜版</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style>  </style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

css, css3

打印文章

这篇文章由雨无形于2009年08月5日 7:33 上午发表在css, 网页设计。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。

相关文章
引用（1）
评论（0）

没有评论

网络生活——关注网络，关注前端设计 » 9个你现在可以使用的CSS3属性

CSS3 Columns属性研究

大约2年前 - 没有评论

CSS3 Columns属性研究 Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下： 1 2 3 4 5 6 -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard…

适合自己的才是最好的——打造最适合自己习惯的reset.css

大约2年前 - 没有评论

适合自己的才是最好的——打造最适合自己习惯的reset.css

最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

…

根据访问者分辨率，自动调用不同版式CSS的代码

大约2年前 - 没有评论

虽然现在已经基本淘汰800分辨率了1024已经成为主流，但是随着大屏幕液晶的不断降价，更高的分辨率将会逐步成为主流，为了适应越来越大的分辨率，有时候我们会采用流体布局，但是流体布局有时候也有局限性，下面一段js可以实现根据用户客户端分辨率的不同，调用不同的css代码来实现适应不同分辨率的效果。

Acid2 Browser Test

大约3年前 - 没有评论

恕我火星了，今天才知道有Acid2 Browser Test这个东西，动手测试了一下手头的浏览器，IE8 FF3 谷歌浏览器都正常FF2和IE7及以下版本都不正常。

上网搜索了一下

Acid2 Browser Test

Acid2 is a test page, written to help browser vendors ensure proper support for web standards in their products. Please take the Acid2 test!

…

详解CSS的优先权（ZT）

大约3年前 - 没有评论

看这篇文章之前，对这个问题一直没深入研究，导致有时候遇到一些问题会很麻烦，看到这篇文章让我茅塞顿开，转帖回来保存一下以便今后复习。

举国同悲，一条CSS代码把网页变黑白

大约3年前 - 1个评论

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

加在CSS里面网页就可以变黑白的了，但是FLASH还是彩色

CSS文字阴影效果

没有评论

CSS3 Columns属性研究

适合自己的才是最好的——打造最适合自己习惯的reset.css

根据访问者分辨率，自动调用不同版式CSS的代码

Acid2 Browser Test

Acid2 Browser Test

详解CSS的优先权（ZT）

举国同悲，一条CSS代码把网页变黑白

IETester多IE版本共存的解决方案

div层总是被flash层遮盖的解决方案

几个纯CSS菜单效果

译文:创建性感的CSS（ZT）

友情链接

CSS文字阴影效果

没有评论

Acid2 Browser Test

用户登录

友情链接