CSS 滤镜详解

 

CSS 滤镜详解

序号	滤镜	描述
1	Alpha	透明的层次效果
2	Blur	模糊效果
3	Chroma	特定颜色的透明效果
4	Dropshadow	阴影效果
5	FlipH	沿水平方向翻转效果
6	FilpV	沿垂直方向翻转效果
7	Glow	边缘光晕效果
8	Gray	灰度效果
9	Invert	将颜色的饱和度和亮度值完全反转
10	Mask	遮罩效果
11	Shadow	渐变阴影效果
12	Wave	波浪变形效果
13	Xray	X 射线效果

 

1. Alpha 滤镜设置透明层次

语法：{filter:Alpha(Opacity=value,Finishopacity=value,Style=value,

StartX=value,StartY=value,FinishX=value,FinishY=value)}

Alpha 滤镜属性值	描述
Opacity	代表透明水准， 默认的范围是0 ~ 100，0代表完全透明，100代表完全不透明
Finishopacity	一个可选参数， 设置渐变的透明效果时，就用这个参数来指定结束时的透明度
Style	指定透明区域的形状：0代表统一形状，   1代表线形，   2代表放射状，   3代表长方形
StartX	渐变透明效果的开始 x 坐标
StartY	渐变透明效果的开始 y 坐标
FinishX	渐变透明效果的结束 x 坐标
FinishY	渐变透明效果的结束 y 坐标

例：

.classA{filter:Alpha(Opacity=50,Style=3,StartX=20,StartY=20,

FinishX=420,FinishY=420);}

 

2. Blur 滤镜模糊效果

语法：

{filter:Blur(Add=value,Direction=value,Strength=value)}

Blur 滤镜属性值	描述
Add	指定图片是否被改变成印象派的模糊效果，取值true | false
Direction	用来设置模糊的方向，模糊效果按顺时针方向进行， 0度代表垂直向上，然后每45度为一个单位， 默认值为向左 270度
Strength	代表有多少像素的宽度将受到模糊影响，默认为5个像素

例：

.classB{filter:Blur(Add=true,Direction=45,Strength=20);}

 

3. Chroma 滤镜设置特定颜色的透明

语法：{filter:Chroma(Color=color_value);}

例：

img.classC{filter:Chroma(Color=#4FAA4D);}

 

4. Dropshadow 滤镜阴影效果

语法：{filter:Dropshadow(Color=value,OffX=value,OffY=value,

Positive=value)}

Dropshadow 滤镜属性	描述
Color	阴影颜色
OffX	X 轴方向阴影的偏移量，正数表示沿X 轴右方向偏移，                   负数表示沿 X 轴左方向偏移
OffY	Y 轴方向阴影的偏移量，正数表示沿Y 轴向下方向偏移                   负数表示沿Y 轴向上方向偏移
Positive	取值为 true | false True 表示 为不透明像素建立可见阴影 False表示为透明像素建立可见阴影

例：.classD{fiter:DropShadow(Color=gray,OffX=5,OffY=5,Positive=1);}

 

5. FlipH 滤镜水平翻转效果

语法：{filter:FlipH}

例： img.classF{filter:FlipH;}

 

6. FlipV 滤镜垂直翻转效果

语法： {filter:FlipV}

例：  img{filter:FlipV;}

 

7. Glow 滤镜设置边缘光晕

语法：{filter:Glow(Color=color_value,Strength=value)}

参数说明：Color   : 设定边缘光晕的颜色

          Strength：设定边缘光晕的强度大小，范围：1 ~ 255

例：.classG{filter:Glow(Color=pink,Strength=3);}

 

8. Gray 滤镜灰度效果

语法：{filter:Gray;}

说明：可以把一张图片变成灰度图

 

9. Invert 滤镜反转效果

语法：{filter:Invert;}

说明：可以把元素的可视化属性全部反转，包括色彩、饱和度和亮度值；

 

10. Mask 滤镜遮罩效果

语法：{filter:Mask(Color=color_value)}

参数说明：

Color:遮罩所用的颜色

Mask: 将可看见的像素遮蔽，将看不见的像素以指定的颜色显示

 

11. Shadow 滤镜渐变阴影效果

语法：{filter:Shadow(Color=color_value,Direction=value);}

参数说明：

Color:      设定渐变阴影的颜色

Direction：设定渐变阴影的方向，渐变阴影是按顺时针方向进行的，0度代表垂直向上，然后每45度为一个单位，默认值为向左270度

 

12. Wave 滤镜波浪变形效果

语法：

{filter:Wave(Add=value,Freq=value,LightStrength=value,

Phase=value,Strength=value)}

Wave 滤镜属性值	描述
Add	是否把元素按照波形样式打乱
Freq	波纹的频率。即指定在一个元素上需要产生多少个完整的波纹
LightStrength	增强波纹光影的效果，范围是0 ~ 100
Phase	设置正弦波的偏移量
Strength	设置振幅大小

例：img.classW{filter:Wave(Add=add,Freq=3,LightStrength=60,

Phase=40,Strength=12);}

 

13. Xray 滤镜X 射线效果

语法：{filter:Xray;}

说明：可以使元素反映出它的轮廓并把轮廓加亮，呈现X 光片的效果。