巧用CSS的Dropshadow滤镜

顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量，然后加上颜色.

语法：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>

效果：