考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > CSS/HTML > 文章内容
  

CSS中阴影的运用详细说明

 [ 2017年6月27日 ] 【

设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合:
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}

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轴分别是其阴影的偏移位置,模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影,你可以用逗号分开多组设置(当然也可以只是用单个设置)。
示例:
h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial;

text-indent:2em;

text-shadow:black 2px 2px 2px; }

效果如下图

#FormatImgID_0#

该属性目前被除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);}

效果如图:

#FormatImgID_1#

这里我们使用到了rgba色彩,它是一种在CSS中同时声明颜色及其透明度的一种方法,且被大多数A级浏览器支持的色彩属性(除了IE),了解更多请查看:《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。

首页 1 2 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved