CSS 滤镜大全

合集下载

一篇文章带你了解CSS3滤镜（Filters）——上篇

一篇文章带你了解CSS3滤镜（Filters）——上篇回复“前端”即可获赠前端相关学习资料今日鸡汤朝辞白帝彩云间，千里江陵一日还。

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

一、模糊效果像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。

此函数接受CSS长度值作为定义模糊半径的参数。

较大的值将产生更多的模糊。

如果未提供参数，则使用值0。

例：•••••••••••••img.blur { -webkit-filter: blur(2px); /* Chrome, Safari, Opera */ filter: blur(2px);}img.extra-blur { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);}/* Some CSS tobeautify this example */table td{ padding: 10px; text-align: center;}运行结果：二、设置图像亮度brightness()功能可用于设置图像的亮度。

值为0%将创建全黑的图像。

而值100%或1使图像不变。

其他值是效果的线性乘数。

还可以将亮度设置为高于100％，这样可以使图像更亮。

如果缺少数量参数，则使用值1。

不允许使用负值。

例：•••••••••••••••••••••••<style>img {width: 200px;height: 100px;}img.blur {-webkit-filter: blur(2px);/* Chrome, Safari, Opera */filter: blur(2px);}img.extra-blur {-webkit-filter: blur(5px);/* Chrome, Safari, Opera */filter: blur(5px);}/* Some CSS to beautify this example */table td {padding: 10px;text-align: center;}</style>运行结果：注意：75%接受以百分号表示的值（例如）的过滤器函数也接受以十进制表示的值（如0.75）。

CSS滤镜知识点

CSS滤镜知识点CSS滤镜是一种应用于HTML元素的视觉效果工具，通过改变元素的颜色、亮度、对比度等属性，能够实现各种各样的效果。

在本文中，我们将深入探讨CSS滤镜的相关知识点。

一、CSS滤镜简介CSS滤镜是一系列用于改变HTML元素的呈现方式的特效。

通过对图像或元素应用一系列滤镜效果，我们可以改变其外观和视觉效果，从而创造出更加丰富多样的界面效果。

二、常用的CSS滤镜属性1. filter属性filter属性是应用滤镜效果的关键属性，通过给元素添加filter属性来应用滤镜效果。

具体的滤镜效果是通过filter函数来定义的。

2. blur滤镜blur滤镜用于给元素添加模糊效果。

可以通过设置模糊半径来控制模糊程度，半径越大，模糊程度越高。

3. brightness滤镜brightness滤镜用于调整元素的亮度。

可以通过设置亮度的百分比来控制亮度的变化，例如brightness(150%)表示将元素的亮度增加50%。

4. contrast滤镜contrast滤镜用于调整元素的对比度。

可以通过设置对比度的百分比来控制对比度的变化，例如contrast(200%)表示将元素的对比度增加100%。

5. grayscale滤镜grayscale滤镜用于将元素转换为灰度图像。

可以通过设置灰度的百分比来控制灰度的变化，例如grayscale(50%)表示将元素的灰度程度设置为50%。

6. sepia滤镜sepia滤镜用于将元素转换为复古风格的棕色色调。

可以通过设置棕色的百分比来控制棕色的变化，例如sepia(80%)表示将元素的棕色程度设置为80%。

7. saturate滤镜saturate滤镜用于调整元素的饱和度。

可以通过设置饱和度的百分比来控制饱和度的变化，例如saturate(200%)表示将元素的饱和度增加100%。

8. hue-rotate滤镜hue-rotate滤镜用于旋转元素的色相。

可以通过设置旋转角度来控制色相的变化，例如hue-rotate(90deg)表示将元素的色相顺时针旋转90度。

CSS的过滤器属性

CSS的过滤器属性CSS过滤器包括Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, RevealTrans, Shadow, Wave, Xray等。

1、静态CSSstyle="filter: Alpha( …… )"Alpha：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

BlendTransBlur风吹模糊效果语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"说明：Add：一般为1，或0。

当为1时表示使用模糊效果。

Direction：动态模糊效果的角度方向，0～315度，步长为45度。

0代表垂直向上，按顺时针方向，每45度一个单位，默认值是向左270度。

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

设置模糊宽度。

例子：filter:Blur(Add="1",Direction="45",Strength="5")Chroma特定颜色的透明效果语法：STYLE="filter:Chroma(Color = color)"说明：color：#rrggbb格式，任意。

CSS滤镜的应用ppt课件

finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0~100；
style参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表圆形放射渐变、3代表矩形放射渐变。当style为2或3时，startX和startY等坐标参数便没有意义，都是以图片中心为起始，四周为结束。
其中color属性设置阴影的颜色，direction属性设定阴影的方向。
源码见实例10-11.html
十三、X射线（X-ray）
Xray滤镜的效果是给图片添加X光照射的感觉，表达式如下： filter:Xray;
源码见实例10-12.html
十四、浮雕纹理（Emboss和Engrave）
在css滤镜中有两个滤镜都能够提供类似浮雕的效果，它们分别是 Emboss滤镜和Engrave滤镜，两个不同之处在于Emboss产生凹陷的浮雕效果，而Engrave则产生凸出的浮雕效果，其语法分别如下所示：
值大的则产生高亮滤光效果。对于高对比度的图片而言，该值对滤镜的结果影响较小。
十四、浮雕纹理（Emboss和Engrave）
源码见实例10-13.html
十五、波浪（Wave）
Wave滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对象按照竖直的波纹样式打乱，其表达式为：
filter:wave(add=1或0,freq=数值,lightstrength= 0~100,phase= 0~100,strength=数值);
源码见实例10-05.html 注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果
七、翻转变幻（Flip）
Flip滤镜的使用非常简单，没有任何参数，fliph代表水平翻转，flipv 代表垂直翻转，表达式分别为：

第4章滤镜

注： makeshadow值取false时按正常色彩显示对象；值取true时对象内容不作模糊处理，而是将对象内容转化为黑色，并添加模糊效果，再利用 shadowopacity控制阴影的透明度。
2）运动模糊MotionBlur
filter: progid:DXImageTransform.Microsoft. MotionBlur (add=…, direction=…, strength=…);
</body></html>
5. 波浪Wave
Wave使文字或图像产生纵向或横向的波浪效果。
定义格式：
Filter: wave ( add=…, freq=…, lightstrength=…, phase=…, strength=… ); Add：可取0或1，0表示不显示原对象，1表示显示原对象 Freq：产生波纹的频率，即对象一共要产生多少个完整的波纹 Lightstrength：增强光效果，取值0~100 Phase：正弦波开始的偏移量，通常取0。
CSS补充 —— 滤镜
1. 滤镜简介 2. Alpha滤镜 3. 模糊和运动模糊 4. 对称变换Flip 5. 波浪Wave 6. 其它效果简介
1. 滤镜简介
滤镜不符合CSS标准，是微软公司为增强浏览器功能而特意开发的，并整合在IE浏览器中的一类功能的集合。滤镜分为基本滤镜和高级滤镜。
基本滤镜通常指可以直接作用在对象上，能立即生效的滤镜。主要有以下几种类型：通道Alpha、对称变换Flip、波浪Wave；模糊效果Blur、运动效果MotionBlur；透明色Chroma、灰色Gray、反色Invert；下落阴影DropShadow、阴影Shadow、光晕Glow、遮罩 Mask； X光效果Xray、浮雕Emboss、Engrave。

第12章 CSS滤镜

•
介绍滤镜概述
•
介绍常用CSS滤镜
12.1 滤镜概述
• 最早的滤镜概念来自于摄影业，通常指安装在相机镜头前用于过滤自然光的附加镜头。所以最早的滤镜是为了实现照片的某些特殊效果而出现的附加镜头。后来在图片处理软件如photoshop中也有了滤镜的概念，PS中的滤镜主要是用来实现图像的各种特殊效果。它在 Photoshop中具有非常神奇的作用。滤镜通常需要同通道、图层等联合使用，才能取得最佳艺术效果。
• 而网页中的滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的功能的集合。由于IE浏览器有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。
12.2 常用CSS滤镜
• 上一节简要介绍了什么是网页滤镜以及其语法格式，本节来介绍一下常见的滤镜种类。主要讲述以下滤镜：透明层次滤镜（alpha）、颜色透明滤镜（chroma）、模糊滤镜（blur）、固定阴影滤镜（dropshadow）、移动阴影滤镜（shadow）、光晕滤镜（glow）、灰度滤镜（gray）、反色滤镜（invert）、镜像滤镜（flip）、遮罩滤镜（mask）、X射线滤镜（x-ray）、和波纹滤镜（wave）。
• 注意：Direction的取值范围是0到315度。strength参数值代表有多少像素的宽度将受到模糊影响，只能使用整数来设置，其默认值是5 像素。
12.2.4 固定阴影滤镜（dropshadow）
• 有时候为产生阴影，又需要不能模糊主体对象，这时候我们就会用固定阴影滤镜dropshadow，以下是dropshadow的通用语法：
/*透明的变化方式*/
• startX=d,
/*开始变化的X轴起点*/

CSS滤镜大全

利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。
filter:shadow(color=red,direction=225)
filter:shadow(color=blue大小。 >>(/html/czxt/index.html) URL(/html/2009-10/6739.html)
9、Mask 滤镜
语法：{filter:mask(color=color)}
使用"MASK"属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。
10、Shadow 滤镜
语法：{filter:shadow(color=color,direction=direction)}
"wave" 属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”，
“ADD”表示是否要把对象按照波形样式打乱，
“FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，
“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0----100，
“PHASE”参数用来设置正弦波的偏移量。
2、Blur 滤镜
语法：对于HTML：{ilter:blur(add=add,direction=direction,strength=strength)}
对于Script语言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur"就是产生同样的模糊效果。

微信小程序CSSfilter（滤镜）的使用示例详解

微信⼩程序CSSfilter（滤镜）的使⽤⽰例详解filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

接下来通过本⽂给⼤家介绍微信⼩程序 CSS filter（滤镜）的使⽤⽰例，感兴趣的朋友⼀起看看吧在 Chrome, Safari 中使⽤ -webkit-filter ，还有 -moz-filter （适配Firefox）， -o-filter （适配Opera）， -ms-filter （适配ie）⽽微信⼩程序⾥使⽤的话，使⽤ filter 就可以了。

⼀时间好奇了下，就多试了⼏个函数，以下是详细的笔记定义filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

分类none 默认值，没有效果。

blur() ⾼斯模糊brightness() 亮度contrast() 对⽐度drop-shadow() 阴影grayscale() 灰度hue-rotate() ⾊相旋转invert() 反⾊opacity() 透明度saturate() 饱和度sepia() 复古⾊url() SVG滤镜使⽤提⽰:滤镜通常使⽤百分⽐ (如：75%), 当然也可以使⽤⼩数来表⽰ (如：0.75)。

blur⾼斯模糊：blur(radius),给图像设置⾼斯模糊。

"radius"⼀值设定⾼斯函数的标准差，或者是屏幕上以多少像素融在⼀起，所以值越⼤越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分⽐值。

filter: blur(18px);brightness亮度：给图⽚应⽤⼀种线性乘法，使其看起来更亮或更暗。

如果值是0%，图像会全⿊。

值是100%，则图像⽆变化。

其他的值对应线性乘数效果。

值超过100%也是可以的，图像会⽐原来更亮。

如果没有设定值，默认是1。

filter: brightness(70%);contrast对⽐度：调整图像的对⽐度。

DIV+CSS中的滤镜和模糊

DIV+CSS中的滤镜和模糊在div＋css中，经常会⽤到div和span当内容⽐较多的时候，会⽤到div当内容⽐较少的时候，会⽤到span来看下⾯的代码：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title></head><body><span style="color:green;font-size:30px;">栏⽬⼀</span><br><span style="color:orange;font-size:16px;">栏⽬⼆</span><br><span style="color:blue;font-size:16px;font-style:italic;">栏⽬三</span><br><span style="color:green;font-size:16px;font-weight:bold;">栏⽬四</span><br><span style="color:navy;font-size:16px;font-weight:bold;">栏⽬五</span><br></body></html>执⾏后的效果如下：在这⾥设置了字体的粗细．设置段落字体的粗细的属性：font-weigth属性设置⽂本的粗细．使⽤bold关键字可以将⽂本设置为粗体．关键字100~900为字体指定了９级加粗度，如果⼀个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．如果将元素的加粗设置为bolder,浏览器会设置⽐所继承值更粗的⼀个字体加粗．与此相反，关键词lighter会导致浏览器将加粗度下移⽽不是上移．p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900}看到上⾯的代码，是不是感觉很low.假如现在想把上⾯的五⾏字都换成跟第⼀⾏字的效果⼀样，有什么好的办法呢？？？来看下⾯的这段代码：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title><style type="text/css">.style1{color:green;font-size:30px;}</style></head><body><span class="style1">栏⽬⼀</span><br><span class="style1">栏⽬⼆</span><br><span class="style1">栏⽬三</span><br><span class="style1">栏⽬四</span><br><span class="style1">栏⽬五</span><br></body></html>刷新浏览器，效果如下：这样想⼀次性修改五⾏的样式的话，就可以相接修改style⾥⾯的代码就可以了．⽐如，现在想把五⾏的字体都变成斜体的话，就可以加上下⾯的属性就可以了．font-style:italic;修改后的代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title><style type="text/css">.style1{color:green;font-size:30px;font-style:italic;}</style></head><body><span class="style1">栏⽬⼀</span><br><span class="style1">栏⽬⼆</span><br><span class="style1">栏⽬三</span><br><span class="style1">栏⽬四</span><br><span class="style1">栏⽬五</span><br></body></html>刷新浏览器后得到的效果如下：可以看到css可以统⼀⽹站的风格．现在想把⼀个⽹站的所有图⽚都为成⿊⽩⾊或者模糊，这个要怎么实现呢？？代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>CSS的滤镜效果</title><style type="text/css">a:link img {filter: grayscale(100%);}a:hover img {filter: grayscale(10%);}</style></head><body><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a></body></html>当图⽚正常显⽰，⿏标没有放在图⽚上的时候，图⽚显⽰的是灰⾊的；当⿏标放置在图⽚上的时候，图⽚就变成正常颜⾊的了．现在把⿏标放在第⼀张图⽚上，显⽰的效果如下：再把⿏标移动到第四张图⽚上，显⽰的效果如下：这就是滤镜的效果．再来看看使⽤css达到图⽚模糊的效果．代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>CSS的滤镜效果</title><style type="text/css">a:link img {filter:blur(10px);}a:hover img {filter:blur(0px);}</style></head><body><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a></body></html>现在图⽚正常显⽰，⿏标暂时没有放置到任何⼀张图⽚上，效果如下：把⿏标放在第⼀张图⽚上，显⽰的效果如下:再把⿏标放在第四张图⽚上,显⽰的效果如下:这就达到想要的图⽚模糊的效果了.。

CSS3 filter(滤镜)属性详解

CSS3 filter（滤镜）属性详解
css3的滤镜filter属性，可以对网页中的举行类似Photoshop处理的效果，h5时代的来临，我们可以通过css对图像举行处理。

扫瞄器支持状况：惟独IE扫瞄器不支持filter（滤镜）属性，为了兼容低版本的safari和google扫瞄器，需要加上前缀-webkit-
filter（滤镜）属性现在规范中支持的效果有：
grayscale 灰度（值为0-1之间的小数）
filter:grayscale(1); -webkit-filter:grayscale(1);
0表示灰度为0%，显示原图，1 表示灰度为100%灰色。

sepia 褐色（值为0-1之间的小数）
filter:sepia(1); -webkit-filter:sepia(1);
0表示褐色度为0%，显示原图，1 表示褐色度为100%显示褐色。

saturate 饱和度（值为num）
filter:saturate(1.8); -webkit-filter:saturate(1.8);
0表示饱和为0，显示黑白色，0.5表示饱和度为原图的一半，1表示饱和度等于原图，数值大于1表示饱和度加强。

第1页共3页。

css滤镜的用法(一)

css滤镜的用法(一)CSS滤镜用法详解CSS滤镜是一种强大的效果工具，可以对元素应用各种各样的视觉效果。

在这篇文章中，我们将详细讲解一些常用的CSS滤镜用法。

1. 模糊滤镜•背景模糊：filter: blur(5px);使用blur函数可以对元素进行模糊处理。

可以通过调整参数值来控制模糊程度，参数值越大，模糊效果越明显。

•文本模糊：filter: blur(2px) contrast(150%);除了可以对背景进行模糊处理，blur函数还可以用于对文本进行模糊处理。

在这个例子中，我们还添加了contrast函数来增加对比度，使文本更加清晰。

2. 饱和度调节•增加饱和度：filter: saturate(200%);saturate函数可以增加元素的饱和度。

参数值越大，饱和度越高。

•减少饱和度：filter: saturate(50%);与增加饱和度相反，通过使用较小的参数值，可以减少元素的饱和度。

3. 对比度调节•增加对比度：filter: contrast(200%);使用contrast函数可以增加元素的对比度。

参数值越大，对比度越高。

•减少对比度：filter: contrast(50%);通过使用较小的参数值，可以减少元素的对比度。

4. 亮度调节•增加亮度：filter: brightness(200%);使用brightness函数可以增加元素的亮度。

参数值越大，亮度越高。

•减少亮度：filter: brightness(50%);通过使用较小的参数值，可以减少元素的亮度。

5. 透明度调节•增加透明度：filter: opacity(50%);使用opacity函数可以增加元素的透明度。

参数值越大，透明度越高。

•减少透明度：filter: opacity(10%);通过使用较小的参数值，可以减少元素的透明度。

6. 色调调节•调整色调：filter: hue-rotate(90deg);使用hue-rotate 函数可以调整元素的色调。

web_CSS滤镜

Alpha 滤镜的使用
属性
opacity style
值说明
0-100 对象的亮度 1,2,3 滤镜的样式
Blur 滤镜的使用
属性
add direction strength
值
true/false 0-360 数字
说明
是否印象派角度模糊度
Fliph、Flipv 滤镜
属性
无
值说明
DropShadow 滤镜
第十七章
CSS滤镜
Filter 属性介绍 Alpha 滤镜的使用 Blur 滤镜的使用 Filph、Filpv 滤镜 DropShadow 滤镜 Glow 滤镜 Gray、Invert、Xray 滤镜 Shadow 滤镜
本章目标
Filter 属性介绍
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属性为absolute，或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在img 对象上应用shadow 滤镜，可以在该对象img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用Microsoft® DirectX® Media SDK，你可以使用C++开发和使用第三方滤镜。该属性在 MAC 平台上不可用。对应的脚本特性为filter。
属性
color offx offy Positive
值
颜色数字数字 true/false
说明
阴影颜色 x 坐标偏移 y 坐标偏移是否建立透明
属性
值说明
color

DW css滤镜应用

1、用mask滤镜特效：五彩缤纷的文字mask滤镜效果这是mask滤镜的效果。

这里用了个白色滤镜，其代码是：.mask1 { filter:mask(color=#ffffff) }。

五彩缤纷的文字颜色实际上就是背景的颜色。

其制作方法也很简单，就是插入一个1*1的表格，给表格加上多彩色的背景，在表格中输入文字，给单元格加载一个mask 滤镜。

2、Blur滤镜的参数，以便你灵活应用：Add：是否使Blur滤镜起作用，Add=False(或“0”)时Blur滤镜不起作用，取True（或非“0”值）时Blur滤镜起作用，它实际上是一个布尔参数，只有两个值，即true和false；Direction：阴影的方向，取值范围0~360度，45度一个间隔，所以实际上只有八个方向值；Strength：它代表有多少个像素的宽度成为阴影3、Dropshadow滤镜代码是：DropShadow(Color=gray,OffX=5, OffY=-5, Positive=1)。

Dropshadow滤镜有四个参数，它们的含义为：“Color”：代表投射阴影的颜色，我在本例中用的是“gray” ，但在实际应用中往往是用十六进制的颜色代码，如#FF0000为红色等等；“offx”和“offy”：分别是X方向和Y方向阴影的偏移量，它必须用整数值，如果是正整数，那么表示阴影向X 轴的右方向和Y轴的下方向。

若是负整数值，阴影的方向正好相反。

另外“offx”和“offy”数值的大小决定了阴影离开对象的距离；“Positive”参数：是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果。

4、“glow”滤镜只有两个参数，一个是“color”是指定发光的颜色，可用十六进制的颜色代码来设定，如#FF0000（表示红色）；另一个参数是“strength”则是表示发光的强度，可以从1到255之间的任何整数来指定这个发光强度5、"wave"滤镜，它的作用是把对象按照垂直的波形样式扭曲，从而产生一种特殊的效果。

CSS滤镜是什么呢

CSS滤镜是什么呢
css滤镜的标识符是“filter”，总体的应用上和其他的css语句相同。

css滤镜可分为基本滤镜和高级滤镜两种。

css滤镜分类CSS滤镜可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。

而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。

我们为大家收集整理了关于CSS滤镜是什幺，以方便大家参考。

1.Gray滤镜
Gray滤镜的作用是产生黑白效果
2.Invert滤镜
Invert滤镜的作用是反色效果
3.Xray滤镜
Xray滤镜的作用是产生X光效果
4.fliph和flipv
fliph滤镜的作用是产生水平翻转效果;flipv滤镜的作用是产生垂直翻转效果 5.alpha滤镜
alpha滤镜作用主要是对图片的透明度进行处理
说明：value1为图片的透明值，范围是0(完全透明)～100(完全不透明)
value2为图片透明度变换结束时的透明值，范围是0(完全透明)～100(完全不透明) 注：该值只有在value3设定时才有效
value3为图片透明度变换方向。

取值为1时，图片透明度按从左到右线性变化;取值为2时，图片透明度从内到外沿半径变化;取值为3时，图
片透明度从内到外呈矩形变化
6.shadow滤镜。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS 滤镜大全css滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。

css滤镜可分为基本滤镜和高级滤镜两种。

可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。

而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。

progID= program identifier （程序ID）DX=DirectX在CSS样式中，提供了filter（滤镜效果），它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果。

旋转：style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"去背景色：style="filter:Chroma(Color=#000000)"设置渐变色：style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolo rstr=#ffff00,gradientType=1)"以下是图片转换滤镜：随机变换：progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)方形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)方形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)交叉渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)交叉渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)菱形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)菱形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)圆形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)圆形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)加号渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)加号渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)星形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)星形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)向上擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)向下擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)向左擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)向右擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)Ｖ百叶窗：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)Ｈ百叶窗：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12) ：progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2) ：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60) ：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12) ：progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12) ：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2) ：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60) ：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60) 随机溶解：progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)左右中部收缩：progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)中部左右展开：progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)上下中部收缩：progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)中部上下展开：progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal) 阶梯左下：progid:DXImageTransform.Microsoft.Strips(motion=leftdown)阶梯右上：progid:DXImageTransform.Microsoft.Strips(motion=rightup)阶梯左上：progid:DXImageTransform.Microsoft.Strips(motion=leftup)阶梯右下：progid:DXImageTransform.Microsoft.Strips(motion=rightdown)随机水平线：progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)随机垂直线：progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)标准渐变转化：BlendTrans(enabled=true,percent=10)可调渐变转化：progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)向右下插入：progid:DXImageTransform.Microsoft.Inset(enabled=ture)马赛克效果：progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)时钟：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)反时钟：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)辐射射线：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)推动式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)交换式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)螺旋形收缩：progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)隐藏式伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)推动伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)旋转伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)风车转动：progid:DXImageTransform.Microsoft.Wheel(spokes=20)模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward) ：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse) ：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward) ：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse) Ｚ形曲折：progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)。