Shadow与DropShadow这两者区别在于:
前者依靠指定角度值可以在任意的角度投射阴影,这些阴影是对象原先部分的延伸。而后者是依靠指定在X方向和Y方向的偏移量来定义投影的,那些阴影其实是对象原封不动的移动。
当你把这两种投影的效果放在一起对比就可以看出它们之间的区别了!
Css滤镜可以给文字或图片等元素加上阴影效果,但是各种方法实现的效果略有差别本节将介绍DropShadow滤镜和Shadw滤镜的语法和使用方法,并比较两者之间的差别。
DropShadow属性是为了添加对象的阴影效果用的它在页面上显示出该对象的投影实现的效果看上去就像使原来的对象离开页面一样,有了立体感。它有表达方式如下所示:
filter: DropShadow(Coler=color, offx=offx, Off=offy,positive=positive)
“Color”:代表投射阴影的颜色,我在本例中用的是“gray” ,但在实际应用中往往是用十六进制的颜色代码,如#FF0000为红色等等;
“offx”和“offy”:分别是X方向和Y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;
“Positive”参数:是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果。这句话可能不大好理解,不要着急,看了后面的例子,你就会明白的。
对文字加载Dropshadow滤镜比较方便的办法,是把Dropshadow滤镜加载到文字所在的表格单元格< td >上。从上面的效果图,我们可以看出当文字比较小时,使用Dropshadow的效果不太好,所以一般用于制作标题字。
h3{ width=400;height=300;filter: DropShadow(Color=#aaaaaa, OffX=15, OffY=10, Positive=1)}
h3 {FILTER: Shadow(Color=red, direction=225); WIDTH: 228px; COLOR: yellow; HEIGHT: 35px}
实践中常出现dropshadow无效情况,主要是没有满足其他几个条件。
特别注意:
dropshadow一般用在div,label,a上..td等标签上也可以用..
小白实践证明:作用在文字上最好写在td上。如果写在div上,很可能作用在层上,而文字无效果
1.被使用的对象必须包含 position width height等属性中的一个
2.有足够的空间 显示 滤镜效果
3.应用对象若有背景..dropshadow会把背景也包含进去..文字上就不会如期出现shadow..可再用一个符合以上2个条件的无背景标签包含它..
例如:如果你把它放在有背景的表格里就没有效果了。不要给你要加滤镜的文字的容器加上背景色,
比如如果你将上面的代码中的单元格加上bgcolor="#ffffff",滤镜就不起作用了!
另外还要注意的就是要使CSS文字滤镜有效果还得在网页上加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.Dreamweaver本身是不支持滤镜效果显示的,一定要用浏览器预览才可以,切记.
很多人在Dreamweaver下百思不得其解,实际上早就成功了.
实际文字阴影使用效果看,dropshadow并不理想,因为偏移量是整数,但即使是1也很丑(觉得偏了不止1)
Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的:
Filter:Shadow(Color=color,Direction=direction)
在这里,Shadow有两个参数值:Color参数用来指定投影的颜色;Direction参数用来指定投影的方向。
Direction比如 225
做贴身文字阴影
还是用
FILTER: progid:DXImageTransform.Microsoft.DropShadow(color=#013459,offX=1,offY=1,positives=true)
似乎和DropShadow有所区别,但实际效果要好很多