日期:2013-08-26  浏览次数:21316 次

  款式表是一种为超文本标签言语提供加强补充服务的技术,可对每一个html的标签做精雕细刻的修饰。只用html制造的网页,对页面内各部分的修饰能力无限且语句烦锁,款式表正是弥补这一缺陷的无力技术,它语句文法简单,只需在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功用,使网页愈加生动活泼,从而获得满意的效果。当然,款式表的强大还依托的就是它的滤镜功用。由于有了滤镜,大家就可以轻易地创造出“专业”的艺术效果。为了能协助大家高效使用好款式表滤镜,笔者将对款式表滤镜各方面的内容进行详细引见。

一、什么是款式表滤镜

  说到滤镜,其实它并不是对图像进行了什么处理,而是在浏览器中对使用了该属性的对象进行一定的修饰。款式表滤镜实际上是款式表一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果大家有一些脚本言语的基础,能够把滤镜效果与类似javascript的脚本代码做一些结合,就可以拥有一个在款式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。如今能使用的滤镜有13个之多,不过要欣赏到这些滤镜的特效,必需要求用户的浏览器必须在IE4.0/NC6.0之上,由于只要这些版本的浏览器才能支持款式表滤镜效果。

二、常用的款式表滤镜

  随着款式表技术的不断成熟,其滤镜功用和品种也在不断增多。如果用户能够熟练地混合使用它们,将可以产生意想不到的效果。在操作上,用户只需求了解具体滤镜的实际效果后,就能依据实际进行微调了。为了使大家能有针对性地使用滤镜,笔者下面就把一些常用滤镜的功用和参数详细引见如下:

1、α滤镜

作用:该滤镜可以实现各种溶入效果,如果大家将该滤镜与网页脚本言语结合起来,对滤镜的参数进行处理的话,就能很轻易地做出淡入淡出的效果来。

语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,
style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

  参数:Opacity参数代表图象的起始通明度,其默认的数值是从0到100,0代表完全通明,100代表完全不通明;FinishOpacity是一个可选参数,如果想要设置渐变的通明效果,就可以使用他们来指定结束时的通明度,作用范围也是0到100;Style表示通明区域的外形特征,其中“0”代表统一外形,“1”代表线形。“2”代表放射状,“3”代表矩形;startx表示渐变通明效果开始处的X坐标,starty代表渐变通明效果开始处的Y坐标,finishx代表渐变通明效果结束处的X坐标,finishy表示渐变通明效果结束处的Y坐标。

2、模糊滤镜

作用:该滤镜次要是让图象产生一种模糊效果。

语法:{filter:blur(add=add,direction=direction,strength=strength)}

参数:该滤镜次要包括三个参数,其中add是用来指定图象能否被改变成印象派的模糊效果,模糊效果是按顺时针的方向进行的,它的数值应该是ture或false;direction参数是用来设置模糊的方向的,其中0度代表垂直向上,每45度为一个单位,默认值是向左的270度;strength 参数代表有多少像素的宽度将遭到模糊影响,缺省的参数值是5个像素,而且该参数值只能使用整数来指定。

3、斜影滤镜

作用:该滤镜次要是为对象建立轮廓的影子效果的,它可以在指定的方向建立物体的投影;

语法:{filter:shadow(color=color,direction=direction)}

参数:斜影滤镜只要两个参数,其中color代表投影的底色,该数值是用英文字母来代替的,例如投影底色是红色的话,就应该设置color=red;direction参数是用来设置投影方向的,如果该数值是0的话,就代表垂直投影,此外该数值每45度为一个单位,它的默认值是向左的270度。

4、发光滤镜

作用:该滤镜可以给图象或者文字产生一种发光效果;

语法:{filter:glow(color=color,strength=strength)}

参数:该滤镜的color参数与暗影滤镜的color参数功用几乎是一样的,不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的,其值为1到255之间的任何整数。

5、灯光滤镜


作用:灯光滤镜是模仿光源来投射文字或者图象,使图象和文字能产生一定的投射效果;

语法:{filter:light}

参数:一旦为对象定义了“light"滤镜属性后,大家就可以调用它的“方法(Method)"来设置或者改变属性,该滤镜可用的方法有:AddAmbient方法是用来加入包围光源的,AddCone方法是用来加入锥形光源的,MoveLight方法是用来挪动光源的,Changstrength方法是用来改变光源强度的,Changcolor方法是用来改变光的颜色的,Clear方法是用来清除所有光源的。

6、遮罩滤镜

作用:该滤镜可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样。

语法: {filter:mask(color=color)}

参数:该滤镜的color参数表示覆盖对象表面的颜色,例如如果遮罩颜色为绿色,那么就应该设置color=blue。

7、暗影滤镜

作用:暗影滤镜就是给对象添加暗影效果,其任务原理是建立一个偏移量,加上色彩。

语法:{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}
参数:该滤镜中的Color参数表示投射暗影的颜色,offx 表示水平方向暗影的偏移量,offy 表示竖直方向暗影的偏移量,Positive参数是一个布尔值,其数值如果为TRUE,就为任何的非通明像素建立可见的投影,如果为FASLE,就为通明的像素部分建立通明效果。

8、灰度滤镜

作用:该滤镜次要是将图象对象转换成灰度方式显示。

语法:{filter:gray}

参数:该滤镜没有参数。

9、翻转滤镜

作用:翻转滤镜次要是实现图象对象的水平或者竖直翻转效果。

语法:{filter:filph} {filter:filpv}

参数;这种滤镜也不带参数,其中{filter:filph}是实现水平翻转的,{filter:filpv} 是实现竖直翻转的。

10、X光滤镜

作用:X光滤镜可以让对象反映出它的轮廓并把这些轮廓加亮。

语法: {filter:xray}

参数:该滤镜本身不含有参数。

11、倒置滤镜

作用:使用该滤镜可以把包括色彩、饱和度、和亮度值等对象的可视化属性全部翻转。

语法: {filter:invert}

参数:该滤镜没有参数。

12、波纹滤镜

作用:波纹滤镜可以在水平和竖直方向利用正弦波打乱图象,使图象产生水波效果。

语法:{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

参数:该滤镜的add参数是一个布尔数值,它是用来表示能否要把对象按照波形款式打乱;freq参数是用来设置波纹频率的,也就是指定在对象上一共需求产生多少个完整的波纹;lightstrength参数可以设置波纹光影的加强效果的,其数值范围在0到100之间;phase参数是用来设置正弦波的偏移量的,strength是设置正弦波的振幅大小的。