顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色.
语法:STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值。
Offy:Y轴偏离值。
Positive:1或0。
解决Dropshadow滤镜在父容器有背景图片的情况下失效的问题:
样式:
.filter4_4{ float:left; background:url(img/blue.png) no-repeat; width:212px; height:50px; line-height:50px; text-align:center}
.filter4_4 span{filter:
Dropshadow(offx=2,offy=0,color=#FFFFFF)
Dropshadow(offx=0,offy=2,color=#FFFFFF)
Dropshadow(offx=0,offy=-1,color=#FFFFFF)
Dropshadow(offx=-1,offy=0,color=#FFFFFF);
float:left;/*设置滤镜效果必须,在父容器有背景图片的时候*/
margin-left: 20px;/*根据自己需要设定*/
}
代码:
<div class="filter4_4">
<span>背景PNG透明的滤镜效果</span>
</div>
效果: