不使用滤镜给层添加阴影效果
有些浮在页面上的层希望能添加阴影效果,来增加立体效果和层次感,通常采用的也是比较简单的方法是使用滤镜,但是滤镜只在IE下有效,在FireFox等其他浏览器下就不那么好用了,这里除了介绍滤镜方法外也介绍一下用重叠的层来营造一个假的阴影效果
1、使用滤镜产生阴影效果
设置css，基本语法如下
filter:progid:DXImageTransform.Microsoft.Shadow(color=Gray,direction=0,strength=8);
其中的几个参数
color：颜色，就是阴影的颜色，格式是#RRGGBB，也可以使用css中其他颜色的表示方式
direction：投影的方向，按顺时针方向，0表示竖直向上，增量是45，共8个方向，默认是270
strength：投影的长度，就是影子的长度，一般设置为8的时候比较自然
STYLE="filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive )"
让HTML元素产生下落式的阴影效果
两个滤镜的效果如下图
2、使用重叠的层，形成阴影的效果
两个层的页面部分代码：
<div class="ChangePwdBgIndex" >
<div class="ChangePwdBg" style=" margin-left :4px;">/*层间的内容*/
</div>
</div>
样式表：
.ChangePwdBgIndex
{
width:410px;
height:130px;
position:absolute;
z-index:2;
/*filter:progid:DXImageTransform.Microsoft.Shadow(color=black,direction=135,strength=8);用滤镜方法实现*/
background: url(bgpwd.gif) no-repeat bottom right ;
}.ChangePwdBg {
width: 400px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=orange, EndColorStr=#FFFFFF); /*修改密码部分背景*/
border: 1px #000000 solid;
}
ChangePwdBg 层是实际显示内容的层
ChangePwdBgIndex层是用来显示阴影效果的层，使用一个有阴影效果的gif图片(bgpwd.gif)作为背景，也可以使用png图片，但是IE6是不支持png的，阴影图片如下图所示：
这样两个层叠加起来，下面的背景层下右下斜一下，就可以产生阴影效果，结果如下图：
