巧用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>

效果:

展开阅读全文

没有更多推荐了,返回首页