網頁 自W3C公布了樣式單（CSS）的標準以來，HTML的每一部分開始以元素的形式出現，並且事件開始真正被引入頁面，動態HTML成為了人們討論的熱點。實際上，W3C採用的標準即為微軟的DOM，也就是說IE4.0可以更好的支援CSS，並且微軟對CSS還進行了許多十分有益地探索，Filter就是一個很好的例子。
眾所周知，Javascript或Vbscript作為指令碼語言，其功能是不完善的，有許多進階語言的功能無法實現，如圖象的處理功能。Filter是微軟對CSS的擴充，與PhotoShop中的濾鏡概念相似，它可以用很簡單的方法對頁面中的文字特效作出特效處理，靜態如陰影、模糊的效果，動態如各種淡入淡出效果。下面我來仔細講解一下（以下內容需在IE4.0下瀏覽）：
靜態濾鏡：
要顯示濾鏡效果，必須先建立一個地區（<div>），並規定地區的範圍（width和height），以下是對一個一般地區的規定：
<style>
<!--div {height:50;width:300;font-size:20pt}//-->
</style>
把此樣式單放入到“<head>”標記和“<body>”之間，然後在“<body>”標記間填寫本文：
<div>…………</div>
在“<div>”標記中插入樣式單：style="filter:樣式(參數1,參數2,參數3……);"
下面給出完整的例子：
<HTML>
<head>
</head>
<style>
div {height:100;width:400;font-size:20pt}
</style>
<body bgcolor=yellow>
<h1 align=center>Filter Effects</h1><hr>
<div style="filter:wave(add=0,freq=1,lightStrength=20,phase=50,strength=20)">
<img src="http://www.webjx.com/htmldata/2005-02-23/http://www.webjx.com/htmldata/2005-02-23/00cirr.gif">
this is div
is
wave-filtered</div>
<div style="filter:alpha (opacity=10, finishOpacity=10, style=10, startX=10, startY=10, finishX=20, finishY=30, add=0, direction=45, strength=10)">
this is alpha.
<img src=http://www.webjx.com/htmldata/2005-02-23/http://www.webjx.com/htmldata/2005-02-23/00cirr.gif>
</div>
<div style="filter:blur(add=0,direction=45,strength=5)">
this is blur effect.
<img src=http://www.webjx.com/htmldata/2005-02-23/http://www.webjx.com/htmldata/2005-02-23/00cirr.gif>
</div>
<div style="filter:chroma(color=white)">
this is chroma effect
<img src=http://www.webjx.com/htmldata/2005-02-23/http://www.webjx.com/htmldata/2005-02-23/00cirr.gif>
</div>
<div style="filter:flipV">
this is flipV effect
<img src=http://www.webjx.com/htmldata/2005-02-23/http://www.webjx.com/htmldata/2005-02-23/00cirr.gif>
</div>
</body>
</html>
以wave濾鏡為例，它在垂直方向產生正弦波形，其中參數add表示是否加入原圖象（1=是，0=否），freq表示波的數量，phase表示波形的起始位移量，lightStrength表示光對波紋照射的強度，strength表示波的強度。下表是Filter支援的所有濾鏡樣式及其參數：
其中經常出現的color屬性可以用十六進位表示（如#ff0000），也可以用rgb()表示（如rgb(255,0,0)），還可用系統承認的顏色名表示（如red）。
以上就是靜態濾鏡的全部內容，要注意的是CSS是區分大小寫！
動態濾鏡
動態濾鏡可以為頁面添加動人的淡入淡出、圖象轉化效果，它可以分為兩種blend（混合）和reveal（顯示），前者可以使對象漸漸消失或出現，後者提供了24種圖象轉化的效果。對於動態濾鏡的調用除去象在靜態濾鏡中要定義的濾鏡類型，參數等等，還用到指令碼語言控制它的狀態，首先，在開始一個動態效果之前，先需要進行裝備（Apply），然後播放（Play）動態效果，在動態效果進行中還可以中斷動態效果（Stop），以上可以用下面的方法實現：
對象名.filters(濾鏡數值).Apply()
對象名.filters(濾鏡數值).Play()
對象名.filters(濾鏡數值).Stop()
對於濾鏡狀態的判斷可以通過“對象名.filters(濾鏡數值).status”判斷，該值為0時，表示濾鏡未執行，為1時，表示濾鏡已經完成，為2時表示濾鏡在執行中。
在定義filter時，如上面所提到的，可以有混合（“filter:blendTrans(duration=時間數值)”，duration表示濾鏡執行需要的時間，單位為秒）和顯示（“filter:revealTrans(duration=時間數值,transition=過渡類型)”，過渡類型為從0－23的數值）兩種，下面請看混合的例子：
<html>
<head>
</head>
<body>
<div style="position:absolute;left:200;top:50;width:400;height:220;background-
color:yellow;
color:blue;font-size:20px;border:solid black;"
id="main">
<div id="Inner1"
style="position:relative;left:20%;top:35%;width:60%;height:30%; filter:blendTrans(duration=3);">
<p align=center>示範地區</p>
</div>
<div id="control" style="position:absolute;left:180;top:180">
<input type=button value="開始" >
</div>
</div>
<script language="JavaScript">
var curObj=Inner1,i=0;
words=new Array(3);
words[0]="<p align=center>漸漸隱去</p>";
words[1]="<p align=center>慢慢浮現</p>";
words[2]="<p align=center>這就是Blend的效果</p>";
function toggleMultimedia() {
curObj.innerHTML=words[i];
if (curObj.filters(0).status == 2) {
curObj.filters(0).Stop();
if (curObj.style.visibility == "hidden")
curObj.style.visibility = "visible";
else
curObj.style.visibility = "hidden";
window.setTimeout("toggleMultimedia()", 1);
}
//準備開始
curObj.filters(0).Apply();
if (curObj.style.visibility == "hidden")
{curObj.style.visibility = "visible";}
else
{curObj.style.visibility = "hidden";
if (i==2) i=-1;
i=i+1;}
//開始
curObj.filters(0).Play();
window.setTimeout("toggleMultimedia()",4000);
}
</script>
</body>
</html>
下面的例子是reveal的例子。
<HTML>
<head>
<script language="Javascript">
var i=0;
function filter_me(){
if (change.filters(0).status!=2){i=i+1;
if (i%2!=0){
change.style.backgroundColor='yellow';
change.filters(0).Apply();
change.filters(0).Play();
change.style.visibility='hidden';
}
else {
change.style.backgroundColor='brown';
change.filters(0).Apply();
change.filters(0).Play();
change.style.visibility='visible';}
}
}
</script>
</head>
<body>
<div id=change style="color:blue;border:solid
black;position:absolute;left:250;top:100;width:300;height:200;filter: revealTrans(Duration=0.8,Transition=23)"><h1>
Something like this :-></h1>
change.filters(0).Apply();
change.filters(0).Play();
change.style.visibility='hidden';
change.style.backgroundColor='yellow'
</div>
<div style="position:absolute;left:470;top:310">
<input type=button id=button1 value="Click me"
>
</div>
</body>
</HTML>
在Frontpage98中也可以通過設定頁面的參數得到，如要在進入頁面時要顯示某種特效可以在“<body>”標記前加入“<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">”，這個特效在Frantpage98菜單的“樣式/頁面特效”中找到，而reveal的24種特效你也可以在其中找到名稱，值得一提的是第24種特效可以隨機從前23種之一中選擇一種顯示。
