前面的《教程》中，已经讲解了15种滤镜，本节教程，讲解滤镜的组合应用。
滤镜的组合应用，要以滤镜的单独应用为基础。如果对每种滤镜的属性属值以及其显示效果不清楚，组合应用将是一句空话。或者说，就是勉强地将几种滤镜组合在一起，究竟是否显示出这几种滤镜的组合效果，也不清楚，那就没有实在意义了。
本节“教程”，举例讲解几种滤镜组合应用于文字、图片与边框的实例，试图给爱好代码的朋友们起个抛砖引玉的作用。你可根据我讲解的方法，自己去组合几种滤镜，制作几篇网页，探讨一下应用组合滤镜制作网页的奥秘。
滤镜组合应用的方法，是把几种滤镜的属性属值都设置在一个css样式中。每种滤镜的属性属值之间，用空格隔开。两种滤镜的属性属值之间，用逗号隔开。
一、组合滤镜文字：
例1：
代码：
|
<P style="FILTER: glow(strength=1) mask(color=#ff00ff) chroma(color=#ff00ff)" align=center><FONT style="LINE-HEIGHT: 150%; WIDTH: 100%; FONT-FAMILY: 华文新魏; COLOR: #ff00ff; FONT-SIZE: 50pt"><B>春天没来 欢迎您</B></FONT> </P>
|
上面的代码中应用了三种滤镜，各种滤镜样式之间用空格隔开。mask（覆膜）滤镜、chroma（透明颜色）滤镜与文字都设置了相同的颜：粉红色。mask滤镜，将整个段落区域显示为粉红色；透明滤镜，将整个段落区域显示为透明的；glow滤镜用其强度，给文字周围加上了粉红色的光晕。
你可分步添加这三种滤镜，观察其显示效果，以便熟悉各种滤镜的作用。
例如：先添加glow滤镜，显示效果为：文字内容是红色的文字，文字周围的光晕是黑色的（默认颜色）。再把mask滤镜添加上去，效果为：白色的文字内容，粉红色的空白区域。
前面我已经讲过了，mask（覆膜）滤镜文字的颜色，不在于滤镜的颜色，而在于背景颜色。因为段落标签中没有设置背景颜色，所以，文字是透明的，文字显示为白色，是网页的底色：白色。
再把chroma（透明颜色）滤镜样式也添加上去，你再观察一下显示效果，成为粉红色的空心字啦。
效果：
春天没来 欢迎您
请注意：滤镜的组合应用，如果使用的滤镜先后顺序不同，效果一般是不相同的。你可亲自试一试。
例2：
代码：
|
<P style="FILTER: mask(color=#a09261) shadow(color=#000000,strength=10, direction=135) chroma(color=#a09261)" align=center><FONT style="FONT-FAMILY: 黑体; COLOR: #000000; FONT-SIZE: 40pt"><B><I>春天们没来 欢迎您</I></B></FONT> </P>
<P style="FILTER: shadow(color=#000000,strength=10, direction=135) chroma(color=#a09261) mask(color=#a09261)" align=center><FONT style="FONT-FAMILY: 黑体; COLOR: #000000; FONT-SIZE: 40pt"><B><I>春天们没来 欢迎您</I></B></FONT> </P>
<P style="FILTER: chroma(color=#a09261) mask(color=#a09261) shadow(color=#000000,strength=10, direction=135)" align=center><FONT style="FONT-FAMILY: 黑体; COLOR: #000000; FONT-SIZE: 40pt"><B><I>春天们没来 欢迎您</I></B></FONT> </P> |
上面的代码，是应用了三种滤镜制作的文字。由于三种滤镜的应用顺序不相同，所以滤镜文字的显示效果也不相同。
二、用滤镜制作图片效果：
代码：
|
<DIV align=center>
<TABLE style="WIDTH: 640px" border=0 cellSpacing=1 cellPadding=3 bgColor=#dd0000>
<TBODY>
<TR>
<TD width=300>
<P height="150"> </P>
<P align=left><FONT style="LINE-HEIGHT: 43px; LETTER-SPACING: 1px; FONT-FAMILY: 方正楷书; FONT-SIZE: 20px" color=#fff200><STRONG> 代码是制作网页的基础，<BR> 只有学会代码<BR> 才能随心所欲地，<BR> 制作自己喜欢的网页；<BR> 欢迎学习代码，<BR> 欢迎加入代码学习群！</STRONG></FONT></P>
<P height="150"> </P></TD>
<TD style="FILTER: progid:DximageTransform.Microsoft.gradient(startcolorstr=#ff0000 ,endcolorstr=#aa0000,gradientType=1)" width=40><FONT style="FONT-FAMILY: 方正楷书; FONT-SIZE: 24px" color=#fff200><STRONG><BR>献<BR>给<BR>喜<BR>欢<BR>代<BR>码<BR>的<BR>朋<BR>友</STRONG></FONT> </TD>
<TD width=300><BR><BR>
<P style="FILTER: glow(strength=1,color=#0000bb)"><A href="http://www.360doc.com/content/14/0407/07/4127803_366919895.shtml" target=_blank><FONT style="FONT-FAMILY: 华文彩云; FONT-SIZE: 33px" color=#fff200><STRONG>代码学习群 教程</STRONG></FONT></A> </P>
<P><FONT style="FONT-FAMILY: 方正楷书; FONT-SIZE: 25px" color=#fff200><STRONG>春天没来 编撰</STRONG></FONT></P>
<P style="HEIGHT: 130px"> </P>
<P><FONT style="FONT-FAMILY: 方正楷书; FONT-SIZE: 22px" color=#fff200><STRONG>2014年于北京</STRONG></FONT></P></TD></TR></TBODY></TABLE></DIV> |
代码简析：
上面的代码，应用了一套一行三列的表格标签，表格标签中设置了红色的背景颜色。
第一个单元格，宽度为300px，输入了六行文字。文字内容为：代码是制作网页的基础，只有学会代码，才能随心所欲地制作自己喜欢的网页，欢迎学习代码，欢迎加入代码学习群！
第二个单元格，宽度为40px，列标签中设置了 progid:DximageTransform.Microsoft.gradient滤镜样式，输入了文字：献给喜欢代码的朋友。
第三个单元格，宽度为300px，输入了glow滤镜文字：“代码学习群教程”，普通文字：“春天没来”编撰，普通文字：2014年于北京。
整个网页页面，像是在一幅图片中添加了文字内容。其实，是应用了progid:DximageTransform.Microsoft.gradient滤镜制作出来的效果。应用滤镜把第二个单元格的颜色进行了渐变，制作出了一种凹回去的效果，使整个页面，就像是一个红色的书皮。
这篇网页，实际上不是严格意义上的组合滤镜应用，因为其效果特殊，也就在此一并讲解了。
三、组合滤镜图片：
1、用wave滤镜（波形滤镜）与flipv滤镜（垂直翻转滤镜）制作的图片：
代码：
上面的代码，把原图片与“用chroma（透明颜色滤镜）与flipv滤镜（垂直翻转滤镜）制作的图片”放在一起，制作出一种特殊的图片效果。
2、glow滤镜（光晕滤镜）与FlipV滤镜（垂直翻转滤镜）的组合应用：
代码：
四、组合滤镜边框：
用wave滤镜（波形滤镜）、glow滤镜（光晕滤镜）与progid:DXImageTransform.Microsoft.Matrix滤镜制作的边框：
代码：
|
<TABLE style="MARGIN-TOP: 0px" title="春天没来 制作" width=454 align=center height=450>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#747C8B) glow(color=#d5680b,strength=20)" bgColor=#5e005e width=346>
<TABLE style="BORDER-BOTTOM: #747c8b 120px dotted; FILTER: progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='auto expand'); BORDER-LEFT: #747c8b 120px dotted; BORDER-TOP: #747c8b 120px dotted; BORDER-RIGHT: #747c8b 120px dotted" width=200 height=670>
<TBODY>
<TR>
<TD><IMG src="http://userimage5.360doc.com/14/0630/20/4127803_201406302012440803.png"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR> |
上面的代码，是用chroma滤镜（透明颜色滤镜）、glow滤镜（光晕滤镜）与progid:DXImageTransform.Microsoft.Matrix滤镜制作的网页。
代码简析：
上面的代码，是在二重表格中放入了一个透明图片。第一层表格的列标签中设置了chroma滤镜（透明颜色滤镜）与glow滤镜（光晕滤镜）样式，第二层表格的表格标签中设置了progid:DXImageTransform.Microsoft.Matrix滤镜样式。
这篇代码是组合滤镜应用于边框的实例。应用三种滤镜制作了四条边框线。
这篇网页，也不是严格意义上的组合滤镜应用，因为其效果特殊，也就在此一并讲解了。
作业：
一、复习前面讲解的15种滤镜。进一步熟悉各种滤镜的名称，熟悉各种滤镜的表达式，熟悉各种滤镜的属性属值，熟悉各种滤镜的显示效果。
二、简述滤镜组合应用的方法。（滤镜的组合应用，实际上有两种形式：其一为：在一个css样式中，同时应用几种滤镜；其二为：在一篇网页中，同时应用几种滤镜。本节讲解的主要是第一种。）
三、用组合滤镜制作一篇文字网页。
四、用组合滤镜制作一篇图片网页。
 |
“春天没来”编撰
2014年7月16日于北京 |
