正文
用CSS滤镜修饰文字
CSS是Cascadin Style Sheets的简称，中文意思是“串联式排版样式”，也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准，是对HTML功能的补充。CSS并非一种程序设计语言，它只是一种用于页面设计的、由设计者提供的手段，其主要功能是通过对HTML标记进行设定，对网页中的对象进行有效控制，使网页能够按照设计者的意愿来显示。
本文将介绍几个CSS滤镜(用来修饰文本），以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住：CSS滤镜只不过是CSS众多的功能之一，可谓冰山一角而已，更多的功能请查阅有关CSS教程。
一、Alpha滤镜
请先观察以下效果：
我爱想唱就唱！
代码：<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：
opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。
二、Motion Blur滤镜
Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。
以下是实例和代码：
我爱想唱就唱！
<FONT style="FONT-SIZE:30pt;filter:blur(add=1,direction=30,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
三、Drop Shadow滤镜
Drop Shadow滤镜主要产生重叠效果。其属性为：
color属性：设置影子文本的颜色；
offX和offY属性：影子文本下落的位移值；
Positive属性：指定透明象素阴影，布尔型，0为是，1为否。
实例代码及效果：
我爱想唱就唱！
<FONT style="FONT-SIZE:30pt;filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
四、Shadow滤镜
与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：
color属性：阴影颜色；
direction属性：阴影角度，值取0至360度。
实例：
我爱想唱就唱！
代码：
<FONT style="FONT-SIZE:30pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
五、Wave滤镜
此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：
add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq属性：决定显示的频率，即应出现多少个波形；
phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。
实例代码与效果：
我爱想唱就唱！
代码：
<FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
六、Glow滤镜
Glow滤镜生成一种光晕效果。属性：
color属性：光晕颜色；strength：光晕的厚度。
实例代码与效果：
我爱想唱就唱！
代码:
<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
七、Flip滤镜
Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。
我爱想唱就唱！<FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>我爱想唱就唱！</B></FONT>
CSS是Cascadin Style Sheets的简称，中文意思是“串联式排版样式”，也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准，是对HTML功能的补充。CSS并非一种程序设计语言，它只是一种用于页面设计的、由设计者提供的手段，其主要功能是通过对HTML标记进行设定，对网页中的对象进行有效控制，使网页能够按照设计者的意愿来显示。
本文将介绍几个CSS滤镜(用来修饰文本），以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住：CSS滤镜只不过是CSS众多的功能之一，可谓冰山一角而已，更多的功能请查阅有关CSS教程。
一、Alpha滤镜
请先观察以下效果：
我爱想唱就唱！
代码：
从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：
opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。
二、Motion Blur滤镜
Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。
以下是实例和代码：
我爱想唱就唱！
三、Drop Shadow滤镜
Drop Shadow滤镜主要产生重叠效果。其属性为：
color属性：设置影子文本的颜色；
offX和offY属性：影子文本下落的位移值；
Positive属性：指定透明象素阴影，布尔型，0为是，1为否。
实例代码及效果：
我爱想唱就唱！
四、Shadow滤镜
与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：
color属性：阴影颜色；
direction属性：阴影角度，值取0至360度。
实例：
我爱想唱就唱！
代码：
五、Wave滤镜
此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：
add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq属性：决定显示的频率，即应出现多少个波形；
phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。
实例代码与效果：
我爱想唱就唱！
代码：
六、Glow滤镜
Glow滤镜生成一种光晕效果。属性：
color属性：光晕颜色；strength：光晕的厚度。
实例代码与效果：
我爱想唱就唱！
代码:
七、Flip滤镜
Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。
我爱想唱就唱！
评论
目前还没有任何评论
登录后才可评论.
