css滤镜

滤镜

　　语法：STYLE="filter:filtername(fparameter1,　fparameter2...)"
　　　　（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）

　　滤镜说明：
　　　　Alpha：设置透明层次，让HTML元件呈现出透明的渐进效果
　　　　blur：创建高速度移动效果，即模糊效果，让HTML元件产生风吹模糊的效果
　　　　Chroma：制作专用颜色透明，让图像中的某一颜色变成透明色
　　　　DropShadow：创建对象的固定影子，让HTML元件有一个下落式的阴影
　　　　FlipH：创建水平镜像图片，让HTML元件水平翻转
　　　　FlipV：创建垂直镜像图片，让HTML元件垂直翻转
　　　　glow：加光辉在附近对象的边外，在元件的周围产生光晕而模糊的效果
　　　　gray：把图片灰度化，把一个彩色的图片变成黑白色
　　　　invert：反色，产生图片的照片底片的效果
　　　　light：创建光源在对象上，在HTML元件上放置一个光影
　　　　mask：创建透明掩膜在对象上，利用另一个HTML元件在另一个元件上产生图像的遮罩
　　　　shadow：创建偏移固定影子，产生一个比较立体的阴影
　　　　wave：波纹效果，让HTML元件产生水平或是垂直方向上的波浪变形
　　　　Xray：使对象变得像被x光照射一样，产生HTML元件的轮廓，就像是照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

滤镜中我们比较常用的应该就是设置透明度了，这里简单说说几种设置透明度的方法：

　　filter: alpha(opacity=90);    兼容IE浏览器，取值0-100.
　　-moz-opacity: 0.9;            兼容火狐浏览器，取值0-1.
　　opacity: 0.9;                     用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明.

　　从Firefox3.5+不再支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性.

　　IE9+才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

　　IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前。不过，这种写法的寿命也不长，到IE10对filter与   　　 -ms-filter都已经不再支持。

　　Safari 1.2之前的版本，是基于khtml的浏览器内核，1.2版发布后，不再支持-khtml-opacity的写法，-khtml-opacity也随之成为历史。

　　Konqueror从未支持过-khtml-opacity，从4.0版本开始已经支持opacity。

　　除IE外，目前主流浏览器 Opera 9.0+，Safari  1.2(WebKit 125) +，chrome等等都支持opacity这个透明度属性。

　　 

Alpha 滤镜参数详解

参数名	说明	取值说明
Opacity	不透明的程度，百分比。	从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity	这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果。	从0到100，0表是完全透明，100表示完全不透明。
Style	当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。	0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX	渐进开始的 X 坐标值
StartY	渐进开始的 Y 坐标值
FinishX	渐进结束的 X 坐标值
FinishY	渐进结束的 Y 坐标值