css属性

您当前位置:匀阳教程网 >> 网页制作 >> css教程 >> css属性 >> 浏览文章

如何利用CSS属性Text-shadow实现文字阴影效果详解

【字体: 】 浏览量:

设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑seo和网站性能,还可能会使用css Sprites等技术将图片整合:

这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,这又要让你面对该死的IE 6的png透明问题!

对于文字的阴影效果,我们完全可以用css来实现!

Text-shadow

text-shadow可以让我们实现完美的文字阴影效果。基本写法:

					text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

或者

					text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

这里的颜色就是阴影的颜色,你可以将颜色写在前面,也可以写在最后。x轴和y轴分别是其阴影的偏移位置,模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影,你可以用逗号分开多组设置(当然也可以只是用单个设置)。

示例:

					h1{color:#FFF; background:#FFF; font:bold 24px/2 "微软雅黑",Arial; 
text-indent:2em;
text-shadow:black 2px 2px 2px; }

效果如下图:

点击浏览下一页

该属性目前被除IE之外的大部分浏览器支持,对于IE,我们可以使用shadow滤镜来实现:

					filter: Shadow(Color='black', Direction='135', Strength='2')

你可能已经注意到,使用shadow滤镜只能定义角度 direction,而不能定义xy轴,z轴也被换成了strength。注意,使用该滤镜的时候,不能够设置背景颜色,否则滤镜将无效!另外如果你的数学不是很好,不太懂三角函数的算法,你可以使用IE的另外一个滤镜:dropshadow:

					filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

好吧,IE总是会拖我们的后腿,不过值得一提的是,IE的这两个滤镜是支持多层阴影的!比如,可以这样写:

					filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

欲了解更多关于IE的这两个滤镜,请查看:Shadow  Dropshadow

让我们看一个多层阴影的例子(这里无视了IE):

					h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

效果如图:

点击浏览下一页

这里我们使用到了rgba色彩,它是一种在CSS中同时声明颜色及其透明度的一种方法,且被大多数A级浏览器支持的色彩属性(除了IE),text-shadow的浏览器兼容性

目前text-shadow被Firefox 3.5+,Safari 1.1+/chrome 2.0+和opera 9.5支持,IE不支持。需要注意的是,Safari只有4.0才支持多层阴影。

  • IE各个版本都不支持text-shadow;
  • Opera 9.5+支持最多6-9层阴影,并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因,模糊半径被限制到100px;
  • Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面);
  • Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序;
分享到:

网友评论:


热门教程
猜你喜欢的教程
Copyright 2010-2014 Powered by yysem.net
友情链接咨询:1143412387 304366329 豫ICP备11021559号
本网站部分内容来自于互联网以及相关书籍等各方,仅作技术交流学习之用,如果侵权敬请告知,我们会及时改正。