设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合: h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} 这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,这又要让你面对该死的IE 6的png透明问题! 事实上,对于文字的阴影效果,我们完全可以用CSS来实现! 可以查看 查看demo 先。 Text-shadow text-shadow可以让我们实现完美的文字阴影效果。基本写法: text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]... 或者 text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]... 这里的颜色就是阴影的颜色,你可以将颜色写在前面,也可以写在最后。x轴和y轴分别是其阴影的偏移位置,模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影,你可以用逗号分开多组设置(当然也可以只是用单个设置)。 text-indent:2em; 效果如下图: #FormatImgID_0# 该属性目前被除IE之外的大部分浏览器支持,对于IE,我们可以使用shadow滤镜来实现: 你可能已经注意到,使用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): 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);} 效果如图: #FormatImgID_1# 这里我们使用到了rgba色彩,它是一种在CSS中同时声明颜色及其透明度的一种方法,且被大多数A级浏览器支持的色彩属性(除了IE),了解更多请查看:《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。 |
全国职称计算机考试速成过关系列套装:W .. 定价:¥133 优惠价:¥133.0 更多书籍 | |
全国职称计算机考试速成过关系列套装:W .. 定价:¥124 优惠价:¥124.0 更多书籍 |