带你了解样式表滤镜(一)
日期：2013-06-09 浏览次数：21196 次
使用款式表的人，都会对滤镜产生深刻的印象。这是由于我们在编写网页的时候，即便我们不用图片，通过款式表滤镜，只需简单的操作，也同样可以使我们的文字，图片或者按钮鲜艳无比，充满生气，从而加强了本人网页的视觉效果。也许正是那些光怪陆离的滤镜，激发了许多人的兴味和热情，款式表也因此博得了众多网页制造者的青睐。那么，滤镜是什么呢？简单的说吧，它们是一些程序，能够对对象进行复杂的计算，获得常规操作难以实现的“专业”效果。
从IE 4.0版开始，浏览器就提供了一些内置的多媒体滤镜特效，网页设计师们正是利用这些款式表滤镜的控制，才很轻松地做出了漂亮的网页。即便你完全不懂款式表这方面的知识，笔者置信下面要叙说的内容你也不难掌握的。但有一个前提，那就是你必须稍微了解一点HTML语法知识，最好还能知道一点有关脚本言语方面的知识。考虑到各种浏览器对款式表的支持方面的要素，笔者建议你使用IE4.0以上版本的浏览器，这样的话，你就会毫不费力地看到所有的特效。
一、款式表滤镜的构成
滤镜作为款式表大家庭中的一员，它跟其他款式表元素的定义和使用方式当然是一样的，能够直接定义在HTML标识的<head>和</head>只间。款式表滤镜的基本语法为：
标记{FILTER : 滤镜名（属性名１＝属性值１，属性名２＝属性值２，....）;}
它所表达的意思是：在该标记范围内的内容，款式表滤镜将按照小括号内的属性名所限定的对象，按属性值所设定的数值进行特效处理。其中标记为HTML语法中的任意标记，如span，p，br等等；滤镜名就是我们下面所涉及到的14种滤镜名称；每一种滤镜它都有本人特定的属性名及其属性值。
例如：p { filter : alpha(opacity=80,style=1 ); }
以上就是使用款式表滤镜的定义方法。
二、静态滤镜的品种
在IE4.0以上版本浏览器中，支持以下14种款式表滤镜：
滤镜名 说明
Alpha 让对象呈现渐变半通明效果
Blur 让对象产生风吹模糊的效果
DropShadow 让对象有一个下落式的暗影
Glow 在对象的四周产生光晕而模糊的效果
Chroma 让图像中的某一颜色变成通明色
FlipH 让HTML对象水平转换
FlipV 让HTML对象垂直转换
Wave 让HTML对象产生水平或是垂直方向上的正弦波形
Shadow 让对象产生暗影效果
Mask 利用一个HTML对象在另一个对象上产生图像的遮罩
Light 在HTML元件上放置一个光影
Gray 把一个彩色的图象变成灰色调图象
Invert 让对象产生照片底片的效果
XRay 让对象轮廓突出显示
这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。款式表滤镜不只对图象起作用，同时也适用于文本；在这里笔者为方便叙说，暂用文本作为例子来谈谈滤镜的参数及其作用。
三、滤镜的参数及其作用
1、Alpha 滤镜
语法：{FILTER：ALPHA(opacity=属性值１,finishopacity=属性值２,style=属性值３,startx=属性值４,starty=属性值５,finishx=属性值６,finishy=属性值７)}
作用：该滤镜能够使对象呈现渐变半通明效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：Opacity 属性是设置不通明的程度，用百分比表示其属性值，大小是从0到100，0表是完全通明，100表示完全不通明。
FinishOpacity 属性是一个同Opacity一同使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制造出通明渐进的效果；其属性值也是从0到100，0表是完全通明，100表示完全不通明。
Style属性是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生通明渐进时，它次要是用来指定渐进的显示外形，０代表均匀渐进；１代表线形渐进；２代表放射渐进；３代表直角渐进。
StartX 属性是用来设置水平方向渐进的起始位置。
FinishX属性是用来设置水平方向渐进的结束位置。
FinishY属性是用来设置竖直方向渐进的结束位置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>款式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}
-->
</style>
</head>
<body>
<p>款式表滤镜实例</p>
</body>
</html>
2、BLUR滤镜
语法：{filter:blur(add=属性值１,direction=属性值２,strength=属性值３)；}
作用：该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：add属性是用来确定能否在运动模糊中使用原有目标，其属性值有０和１两种，０属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；１属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。
direction属性是用来表示模糊挪动时的角度，其属性值为０到３６０度。
strength属性是用来表示模糊挪动时的距离，该属性值普通可以任意设置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>款式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:blur(add=1,direction=60,strength=2);}
-->
</style>
从IE 4.0版开始，浏览器就提供了一些内置的多媒体滤镜特效，网页设计师们正是利用这些款式表滤镜的控制，才很轻松地做出了漂亮的网页。即便你完全不懂款式表这方面的知识，笔者置信下面要叙说的内容你也不难掌握的。但有一个前提，那就是你必须稍微了解一点HTML语法知识，最好还能知道一点有关脚本言语方面的知识。考虑到各种浏览器对款式表的支持方面的要素，笔者建议你使用IE4.0以上版本的浏览器，这样的话，你就会毫不费力地看到所有的特效。
一、款式表滤镜的构成
滤镜作为款式表大家庭中的一员，它跟其他款式表元素的定义和使用方式当然是一样的，能够直接定义在HTML标识的<head>和</head>只间。款式表滤镜的基本语法为：
标记{FILTER : 滤镜名（属性名１＝属性值１，属性名２＝属性值２，....）;}
它所表达的意思是：在该标记范围内的内容，款式表滤镜将按照小括号内的属性名所限定的对象，按属性值所设定的数值进行特效处理。其中标记为HTML语法中的任意标记，如span，p，br等等；滤镜名就是我们下面所涉及到的14种滤镜名称；每一种滤镜它都有本人特定的属性名及其属性值。
例如：p { filter : alpha(opacity=80,style=1 ); }
以上就是使用款式表滤镜的定义方法。
二、静态滤镜的品种
在IE4.0以上版本浏览器中，支持以下14种款式表滤镜：
滤镜名 说明
Alpha 让对象呈现渐变半通明效果
Blur 让对象产生风吹模糊的效果
DropShadow 让对象有一个下落式的暗影
Glow 在对象的四周产生光晕而模糊的效果
Chroma 让图像中的某一颜色变成通明色
FlipH 让HTML对象水平转换
FlipV 让HTML对象垂直转换
Wave 让HTML对象产生水平或是垂直方向上的正弦波形
Shadow 让对象产生暗影效果
Mask 利用一个HTML对象在另一个对象上产生图像的遮罩
Light 在HTML元件上放置一个光影
Gray 把一个彩色的图象变成灰色调图象
Invert 让对象产生照片底片的效果
XRay 让对象轮廓突出显示
这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。款式表滤镜不只对图象起作用，同时也适用于文本；在这里笔者为方便叙说，暂用文本作为例子来谈谈滤镜的参数及其作用。
三、滤镜的参数及其作用
1、Alpha 滤镜
语法：{FILTER：ALPHA(opacity=属性值１,finishopacity=属性值２,style=属性值３,startx=属性值４,starty=属性值５,finishx=属性值６,finishy=属性值７)}
作用：该滤镜能够使对象呈现渐变半通明效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：Opacity 属性是设置不通明的程度，用百分比表示其属性值，大小是从0到100，0表是完全通明，100表示完全不通明。
FinishOpacity 属性是一个同Opacity一同使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制造出通明渐进的效果；其属性值也是从0到100，0表是完全通明，100表示完全不通明。
Style属性是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生通明渐进时，它次要是用来指定渐进的显示外形，０代表均匀渐进；１代表线形渐进；２代表放射渐进；３代表直角渐进。
StartX 属性是用来设置水平方向渐进的起始位置。
FinishX属性是用来设置水平方向渐进的结束位置。
FinishY属性是用来设置竖直方向渐进的结束位置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>款式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}
-->
</style>
</head>
<body>
<p>款式表滤镜实例</p>
</body>
</html>
2、BLUR滤镜
语法：{filter:blur(add=属性值１,direction=属性值２,strength=属性值３)；}
作用：该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：add属性是用来确定能否在运动模糊中使用原有目标，其属性值有０和１两种，０属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；１属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。
direction属性是用来表示模糊挪动时的角度，其属性值为０到３６０度。
strength属性是用来表示模糊挪动时的距离，该属性值普通可以任意设置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>款式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:blur(add=1,direction=60,strength=2);}
-->
</style>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
