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 光片的效果。