|
代码学习群简易教程（24）滤镜2
本节继续讲解css的常用滤镜。
一、Blur滤镜:模糊效果滤镜。用于使元素产生模糊效果，运用得当可以产生高速移动的动感效果。
1、滤镜样式举例：
style="filter:blur(add=ture,direction=135,strength=10)"
blur滤镜有三个属性。
Add属性意思是指定图片是否被改变成模糊效果。有两种属值：true或者非0数表示要显示模糊效果，false或者0表示不显示模糊效果（实际上是另一种模糊效果）。默认值为显示模糊效果。
Direction属性用来设置模糊的方向。模糊的方向是按顺时针方向旋转的，45度为一个间隔，所以实际上只有八个方向值。0表示向上的方向。45表示右上，90表示向右，135表示右下，180表示向下。225表示左下，270表示向左，315表示左上。
Strength属性：用来指定模糊效果的强度，单位是像素，默认值为5。取值范围为自然数，该取值决定了模糊效果的延伸范围。你也可以简单地理解为阴影的长度。
2、blur滤镜文字：
blur滤镜文字有三种设置方法：
（1）用文字标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在文字标签中。段落标签中要设置背景颜色或者背景图片。
|
<P style="BACKGROUND-COLOR: #00ff00" align=center><FONT style="FILTER: blur(add=ture,direction=45,strength=8); LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微软雅黑; COLOR: rgb(0,0,0); FONT-SIZE: 36pt">欢迎您！加入代码学习群！</FONT></P>
|
（2）只应用段落标签（或者块区标签），把滤镜样式设置在段落（或者块区标签）标签中，还要设置背景颜色或者背景图片。
|
<P style="FILTER: blur(add=ture,direction=45,strength=8); BACKGROUND-COLOR: #005050; LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微软雅黑; COLOR: rgb(255,255,0); FONT-SIZE: 36pt" align=center>欢迎您！加入代码学习群！</P> |
（3）只应用文字标签，把滤镜样式设置在文字标签中，还要设置背景颜色或者背景图片。
|
<FONT style="FILTER: blur(add=ture,direction=45,strength=8); BACKGROUND-COLOR: #00ff00; LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微软雅黑; COLOR: rgb(0,0,255); FONT-SIZE: 36pt" align="center">欢迎您！加入代码学习群！</FONT> |
用上面三种方法设置的滤镜效果基本上是一致的。滤镜的颜色与强度都可以根据自己的喜爱进行修改。
这里要说明的是：如果把滤镜的样式设置在文字标签中，属性：DISPLAY: inline-block;不可省略。省略以后，滤镜效果就显示不出来了。
3、blur滤镜图片：
blur滤镜图片也有三种设置方法：
举例如下：
（1）用图片标签与段落标签（或者块区标签）组合应用，把滤镜样式设置在图片标签中，段落标签（或者块区标签）要设置背景颜色或者背景图片。
（2）在表格标签中设置背景颜色或者背景图片（也可以设置在表格的列标签中）。在单元格内放入图片，把滤镜样式设置在图片标签中。
（3）在移动标签中设置背景颜色或者背景图片，把滤镜样式设置在图片标签中，用移动标签控制图片。
当然了，只用图片标签，把滤镜样式设置在图片标签中也是可以的，但是，效果不大好。
二、水平翻转滤镜
水平翻转，也叫左右翻转。水平翻转滤镜可以制作出对称图片效果。
水平翻转滤镜样式：style="FILTER: FlipH"
1、水平翻转滤镜文字：
水平翻转滤镜文字有三种制作方法。
（1）段落标签（或者块区标签）中设置滤镜样式，设置宽度；文字标签中设置文字的常用属性。
代码举例：
<P style="FILTER: FlipH; WIDTH: 560px"><FONT style="COLOR: rgb(255,0,0); FONT-SIZE: 40pt" face=华文行楷><B>代码学习群 欢迎您</B></FONT></P>
（2）把滤镜样式与文字属性都设置在段落标签或者块区标签中,还要设置宽度值。（请注意：文字属性必须用css样式设置，不能html用代码设置。）
代码举例：
<P style="FILTER: FlipH; WIDTH: 560px; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 华文行楷"><B>代码学习群 欢迎您</B></P>
（3）把滤镜样式与文字属性等都设置在文字标签中。（请注意：别丢失了宽度值，别丢失了DISPLAY: inline-block属性。）
代码举例：
<FONT style="FILTER: FlipH; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 华文行楷"><B>代码学习群 欢迎您</B></FONT>
2、水平翻转滤镜图片：
水平翻转滤镜图片有两种设置方法：
（1）把滤镜样式设置在段落标签（或者块区标签）中。这种设置方法有些浏览器不支持。
代码举例：
（2）把滤镜样式设置在图片标签：
代码举例：
为了能够比较出“水平翻转图片”与“原图片”的不同显示效果，我们常常需要把这两种图片放在同一行。其方法为：把这两种图片放置在一个段落标签（或者块区）中。要注意：应用这种方法，图片的宽度最好不要超过330px。
举例如下：
效果如下：
如果图片的宽度比较大，就应该把这两种图片放置到一行二列的表格中。
举例如下：
三、垂直翻转滤镜：
垂直翻转，也叫上下翻转。垂直翻转滤镜可以制作出类似倒影的图片效果。
垂直翻转滤镜样式：style="filter: FlipV"
1、垂直翻转滤镜文字：
垂直翻转滤镜文字有三种制作方法。
（1）段落标签（或者块区标签）中设置滤镜样式，设置宽度；文字标签中设置文字的常用属性。
|
<P style="FILTER: FlipV" WIDTH: 560px"><FONT style="COLOR: rgb(255,0,0); FONT-SIZE: 40pt" face=华文行楷><B>代码学习群 欢迎您</B></FONT></P> |
（2）把滤镜样式与文字属性都设置在段落标签或者块区标签中,还要设置宽度值。（请注意：文字属性必须用css样式设置，不能html用代码设置。）
代码举例：
|
<P style="FILTER: FlipV; WIDTH: 560px; COLOR: rgb(0,0,255); FONT-SIZE: 40pt; face: 华文行楷"><B>代码学习群 欢迎您</B></P>
|
（3）把滤镜样式与文字属性等都设置在文字标签中。（请注意：别丢失了宽度值，别丢失了DISPLAY: inline-block属性。）
|
<FONT style="FILTER: FlipV; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 华文行楷"><B>代码学习群 欢迎您</B></FONT> |
2、垂直翻转滤镜图片：
垂直翻转滤镜图片有两种设置方法：
（1）把滤镜样式设置在段落标签（或者块区标签）中。这种设置方法有些浏览器不支持。
代码举例：
（2）把滤镜样式设置在图片标签中。
代码举例：
为了显示出类似倒影的效果，最好把原图片和垂直翻转图片放置到二行一列的表格中。
代码举例：
作业：
一、写出Blur滤镜的表达方式。
二、写出Blur滤镜的三种属性以及它们所表示的意义。
三、写出Blur滤镜文字的三种设置方法。
四、写出Blur滤镜图片的三种设置方法。
五、写出水平翻转滤镜的表达方式。
六、写出水平翻转滤镜文字的三种设置方法。
七、写出水平翻转滤镜图片的两种设置方法。
八、写出垂直翻转滤镜的表达方式。
九、写出垂直翻转滤镜文字的三种设置方法。
十、写出垂直翻转滤镜图片的两种设置方法。
十一、应用本节讲解的三种滤镜，各制作一篇文字网页与图片网页。
十二、如果原图片与滤镜图片，不能在同一行显示，有什么处理的方法？
“春天没来”编撰
2014年7月12日于北京 | 
