CSS滤镜的用处有什么。

来源：www.45fan.com 2016-08-24 16:23:35

CSS滤镜的用处有什么。

作者：http://www.swtv.com.cn/adjunct/nr/css/css.htm Alpha 透明层次：滤镜效果
语法：STYLE="filter:filtername(parameter1,parameter2,parameter3...)" 其中：filtername为滤镜的名称；parameter1,parameter2等为滤镜的参数。
滤镜名称及功能说明：

设置透明层次

语法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StarX=starX,Stary=STARy,
FinishX=finishX,FinishY=finishY)"
其中：Opacity 为起始值，取值为0-100，0为透明，100为原图；FinishOpacity 为目标值；取值为0-3；StarX或Stary 为任意值。
例子如下：

FinishOpacity=100
参数	Style=3	Style=2	Style=1	Style=0
Opacity=100	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=50	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=20	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=0	设置透明层次	设置透明层次	设置透明层次	设置透明层次

FinishOpacity=50
参数	Style=3	Style=2	Style=1	Style=0
Opacity=100	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=50	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=20	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=0	设置透明层次	设置透明层次	设置透明层次	设置透明层次

FinishOpacity=20
参数	Style=3	Style=2	Style=1	Style=0
Opacity=100	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=50	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=20	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=0	设置透明层次	设置透明层次	设置透明层次	设置透明层次

FinishOpacity=0
参数	Style=3	Style=2	Style=1	Style=0
Opacity=100	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=50	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=20	设置透明层次	设置透明层次	设置透明层次	设置透明层次
Opacity=0	设置透明层次	设置透明层次	设置透明层次	设置透明层次

Blur 创建高速度移动效果,既模糊效果

语法：STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
其中：Add 是否保留原效果，取值为0 or 1；Direction 为移动角度值，取值为0-315度，步长45度；Strength效果长度值，一般取5即可。
举例如下：

Direction= 0	Strength=0	Strength=5	Strength=10	Strength=20	Strength=50	Strength=100
Add=0	移动效果	移动效果	移动效果	移动效果	移动效果	移动效果
Add=1	移动效果	移动效果	移动效果	移动效果	移动效果	移动效果

Direction=90	Strength=0	Strength=5	Strength=10	Strength=20	Strength=50	Strength=100
Add=0	移动效果	移动效果	移动效果	移动效果	移动效果	移动效果
Add=1	移动效果	移动效果	移动效果	移动效果	移动效果	移动效果

使用Blur.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Blur { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : Blur(Add=1,Direction=45,Strength=5)		滤镜内容仅此一行。这里定义高速度移动效果。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Blur.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Blur.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Blur">高速度移动效果</td></tr>
</Table>
或者
<span class="Blur">高速度移动效果</span>
结果为：
高速度移动效果

Chroma 使某种颜色透明：

Chroma 制作专用颜色透明

语法：STYLE="filter:Chroma(Color=color)"
其中：Color=#rrggbb，任意。
例子：STYLE="filter:Chroma(Color=#FFFF00)" 让黄色透明。

DropShadow 创建对象的固定影子

语法：STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
其中：Color=#rrggbb，任意；OffX或OffY 分别为X或Y轴的偏离值；Positive 取值为0 or 1。
举例如下：

Positive=0	OffY=-10	OffY=-5	OffY=0	OffY=5	OffY=10	OffY=15
OffX=-10	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=-5	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=0	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=5	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=10	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=15	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子

Positive=1	OffY=-10	OffY=-5	OffY=0	OffY=5	OffY=10	OffY=15
OffX=-10	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=-5	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=0	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=5	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=10	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子
OffX=15	固定影子	固定影子	固定影子	固定影子	固定影子	固定影子

使用DropShadow.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
DropShadow { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : DropShadow(Color=#6699cc,OffX=5,OffY=5,Positive=1)		滤镜内容仅此一行。这里定义固定影子。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用DropShadow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="DropShadow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="DropShadow">固定影子</td></tr>
</Table>
或者
<span class="DropShadow">固定影子</span>
结果为：
固定影子

FlipH 创建水平镜像图片

语法：STYLE="filter:FlipH"
例子：STYLE="filter:FlipH"


原图	处理后的图

FlipV 创建垂直镜像图片

语法：STYLE="filter:FlipV"
例子：STYLE="filter:FlipV"


原图	处理后的图

Glow 在对象的外边缘加光辉

语法：STYLE="filter:Glow(Color=color,Strength=strength)"
其中：Color=#rrggbb，发光颜色，任意；Strength 为发光强度，取值为0-100。
举例如下：

Strength=0	Strength=5	Strength=10	Strength=20	Strength=50	Strength=100
光辉	光辉	光辉	光辉	光辉	光辉

使用Glow.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Glow { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : Glow(Color=#FF0000,strength=4)		滤镜内容仅此一行。这里定义光辉颜色为红色，发光强度为4。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Glow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="glow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="glow">在对象的外边缘加光辉</td></tr>
</Table>
或者
<span class="glow">在对象的外边缘加光辉</span>
结果为：
在对象的外边缘加光辉

Gray 把图片/文字灰度化

语法：STYLE="filter:Gray"
例子：STYLE="filter:Gray"

使用Gray.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Gray { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : Gray		滤镜内容仅此一行。这里定义灰度。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Gray.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Gray.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td ><img class="Gray" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Gray">把图片/文字灰度化</td></tr>
</Table>
或者
<img class="Gray" src="图片">
或者
<span class="Gray">把图片/文字灰度化</span>
结果为：


处理前	处理后

Invert 反色

语法：STYLE="filter:Invert"
例子：STYLE="filter:Invert"

使用Invert.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Invert { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : Invert		滤镜内容仅此一行。这里定义反色。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Invert.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Invert.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td ><img class="Invert" src="图片"></td></tr>
</Table>
或者
<Table><tr>
<td class="Invert">反色</td></tr>
</Table>
或者
<img class="Invert" src="图片">
或者
<span class="Invert">反色</span>
结果为：


处理前	处理后

Mask 创建透明遮掩膜在对象上

语法：STYLE="filter:Mask(Color=color)"
其中：Color=#rrggbb，任意。
例子：STYLE="filter:Mask(Color=#ffffe0)"

使用Mask.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Mask { font-family : "Comic Sans MS";
color : #ffff00;		定义字体颜色。字体为黄色。
line-height :19pt;		定义行高
filter : Mask(Color=#ffffe0)		滤镜内容仅此一行。这里定义透明遮掩膜。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Mask.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Mask.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Mask">透明遮掩膜</td></tr>
</Table>
或者
<span class="Mask">透明遮掩膜</span>
或者
<img src="图片" class="Mask">
结果为：


变化前	变化后

Shadow 创建偏移固定影子

语法：STYLE="filter:Shadow(Color=color,Direction=direction)"
其中：Color=#rrggbb，任意；Direction 为角度值，取值为0-315度，步长45度。
举例如下：

Direction=45	固定影子
Direction=315	固定影子

使用Shadow.css的方法

1、首先在文本编辑器中输入以下内容：
内容		注释（不必输入）
Shadow { font-family : "Comic Sans MS";
color : #00ff00;		定义字体颜色。字体为绿色。
line-height :19pt;		定义行高
filter : Shadow(Color=#6699cc,Direction=135)		滤镜内容仅此一行。这里定义固定影子。
font-size : large;		定义字体大校这里为大字体。
font-weight : bold;		定义字体重量。这里为粗体。
width : auto;
height : auto;
position : relative;
padding : 3pt;
}

2、存盘：
用Shadow.css存盘。

3、修改需要引用该文件的html文件:
在主页的<HEAD></HEAD>中加上：
<LINK REL="stylesheet" Type="text/css" HREF="Shadow.css">
在主页的<Body></Body>中加上：
<Table><tr>
<td class="Shadow">固定影子</td></tr>
</Table>
或者
<span class="Shadow">固定影子</span>
结果为：
固定影子

Wave 创建波纹效果

语法：STYLE="filter:Wave(Add=add,Freq=freq,LightStrength=lightstrength,Phase=phase,Strength=strength)"
其中：Add取值为0 or 1;Freq变形值；LightStrength变形百分比；Phase 角度变形百分比；Strength变形强度。
举例如下：

变形百分比对比

Strength=2 Freq=5 Phase=无	LightStrength=0	LightStrength=5	LightStrength=10	LightStrength=20	LightStrength=50	LightStrength=100
Add=0	波纹效果	波纹效果	波纹效果	波纹效果	波纹效果	波纹效果
Add=1	波纹效果	波纹效果	波纹效果	波纹效果	波纹效果	波纹效果

路由器

电脑

手机

网络

CSS滤镜的用处有什么。

推荐阅读