css滤镜相关知识 存货以备不时之需

下面的文章全部是转过来的...地址是http://blog.sina.com.cn/s/blog_62ef109c0100htji.html   尚未获取作者许可，如果追究，我立马删除...

滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器的组成部分，不能用于Netscape浏览器。制定有关标准的组织正

在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部

分。滤镜能节省带宽，而且是你能在制作奇妙的

视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。

1．CSS静态滤镜样式 （filter）（只有IE4.0以上支持）

　　

      语法：STYLE="filter:filtername(fparameter1, fparameter2...)"

　　          （Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

　　滤镜说明：

　　Alpha：设置透明层次

　　blur：创建高速度移动效果，即模糊效果

　　Chroma：制作专用颜色透明

　　DropShadow：创建对象的固定影子

　　FlipH：创建水平镜像图片

　　FlipV：创建垂直镜像图片

　　glow：加光辉在附近对象的边外

　　gray：把图片灰度化

　　invert：反色

　　light：创建光源在对象上

　　mask：创建透明掩膜在对象上

　　shadow：创建偏移固定影子

　　wave：波纹效果

　　Xray：使对象变得像被x光照射一样

　　1、滤镜：Alpha

　　语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"

　　说明：

　　Opacity：起始值，取值为0～100, 0为透明，100为原图。

　　FinishOpacity：目标值。

　　Style：1或2或3

　　StartX：任意值

　　StartY：任意值

　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

　　2、滤镜：blur

　　语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

　　说明：

　　Add：一般为1，或0。

　　Direction：角度，0～315度，步长为45度。

　　Strength：效果增长的数值，一般5即可。

　　例子：filter:Blur(Add="1",Direction="45",Strength="5")

　　3、滤镜：Chroma

　　语法：STYLE="filter:Chroma(Color = color)"

　　说明：color：#rrggbb格式，任意。

　　例子：filter:Chroma(Color="#FFFFFF")

　　4、滤镜：DropShadow

　　语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

　　说明：Color:#rrggbb格式，任意。

　　Offx：X轴偏离值。

　　Offy：Y轴偏离值。

　　Positive：1或0。

　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

　　5、滤镜：FlipH

　　语法：STYLE="filter:FlipH"

　　例子：filter:FlipH

　　6、滤镜：FlipV

　　语法：STYLE="filter:FlipV"

　　例子：filter:FlipV

　　7、滤镜：glow

　　语法：STYLE="filter:Glow(Color=color, Strength=strength)"

　　说明：

　　Color：发光颜色。

　　Strength：强度(0－100)

　　例子：filter:Glow(Color="#6699CC",Strength="5")

　　8、滤镜：gray

　　语法：STYLE="filter:Gray"

　　例子：filter:Gray

　　9、滤镜：invert

　　语法：STYLE="filter:Invert"

　　例子：filter:Invert

　　10、滤镜：mask

　　语法：STYLE="filter:Mask(Color=color)"

　　例子：filter:Mask (Color="#FFFFE0")

　　11、滤镜：shadow

　　语法：filter:Shadow(Color=color, Direction=direction)

　　说明：

　　Color：#rrggbb格式。

　　Direction：角度，0－315度，步长为45度。

　　例子：filter:Shadow (Color="#6699CC", Direction="135")

　　12、滤镜：wave

　　语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

　　说明：

　　Add：一般为1，或0。

　　Freq：变形值。

　　LightStrength：变形百分比。

　　Phase：角度变形百分比。

　　Strength：变形强度。

　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、滤镜：Xray

　　语法：STYLE="filter:Xray"

　　例子：filter:Xray

　　14.颜色变化

　　语法：

　　filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA',EndColorStr='#B5CCFA');

       15.progid:DXImageTransform.Microsoft微软滤镜的应用:progid:DXImageTransform.Microsoft是IE5.5＋及以上版本才有的，而以前的版本中直接使用filter:name即可。)style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9',endColorStr='#CEDFF6',
gradientType='1')" //表格背景渐变样式, gradientType为1左到右,gradientType为0上到

下;

style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)" //表格

线外阴影

filter:progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true); // 投

影滤镜;

filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3); //马赛克;

filter:alpha(opacity=100, finishOpacity=0,style=2); //柔边效果;

黑白照片 // filter: gray;

X光照片 // filter: Xray;

风动模糊 // filter: blur(add=true,direction=45,strength=30);

正弦波纹 // filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

半透明效果 // filter: Alpha(Opacity=50);

线型透明 // filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100,

FinishY=140);

放射透明 // filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200,

FinishY=200);

白色透明 // filter: Chroma(Color=#FFFFFF);

降低色彩 // filter: grays;

底片效果 // filter: invert;

左右翻转 // filter: fliph;

垂直翻转 // filter: flipv;

2．CSS动态滤镜

　　动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型，参数等等，还用到脚本语言控制它的状态。

　　首先，在开始一个动态效果之前，先需要进行装备（Apply），然后播放（Play）动态效果，在动态效果进行中还

可以中断动态效果（Stop），以上可以用下面的方法实现：

　　　　对象名.filters(滤镜数值).Apply()

　　　　对象名.filters(滤镜数值).Play()

　　　　对象名.filters(滤镜数值).Stop()

　　对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值为0时，表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。

　　在定义filter时，如上面所提到的，可以有混合（“filter:blendTrans(duration=时间数值)”，duration表示滤镜执行需要的时间，单位为秒）和显示（“filter:revealTrans(duration=时间数值,transition=过渡类型)”，过渡类型为从0－23的数值）两种。

     1.CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果

中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的< head >与< /head>之间插入这样一行代码：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，

当你进入这个页面时，网页将象拉幕一样从中间向两边拉开，是不是别具一格？！

　　RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：

切换效果   Transition参数值      切换效果       Transition参数值

矩形从大至小      0              随机溶解            12

矩形从小至大      1            从上下向中间展开      13

圆形从大至小      2            从中间向上下展开      14

圆形从小至大      3            从两边向中间展开      15

向上推开          4            从中间向两边展开      16

向下推开          5            从右上向左下展开      17

向右推开          6            从右下向左上展开      18

向左推开          7            从左上向右下展开      19

垂直形百叶窗      8            从左下向右上展开      20

水平形百叶窗      9              随机水平细纹        21

水平棋盘