1、概述
好了，下面我們將進(jìn)入CSS的最精彩的部分--濾鏡，它將把我們帶入絢麗多姿的多媒體世界。正是有了濾鏡屬性，頁(yè)面才變得更加漂亮。
CSS的濾鏡屬性的標(biāo)識(shí)符是filter。為了使您對(duì)它有個(gè)整體的印象，我們先來(lái)看一下它的書寫格式：
filter：filtername（parameters）
怎么樣？是不是很簡(jiǎn)單，看上去與前面講的屬性定義沒(méi)什么太大的差別。Filter是濾鏡屬性選擇符。
也就是說(shuō)，只要您進(jìn)行濾鏡操作，就必須先定義filter；filtername是濾鏡屬性名，這里包括alpha、blur、chroma等等多種屬性，詳細(xì)內(nèi)容請(qǐng)看下表：
上面filter表達(dá)式中括號(hào)內(nèi)的parameters是表示各個(gè)濾鏡屬性的參數(shù)，也正是這些參數(shù)決定了濾鏡將以怎樣的效果顯示。
看了上面長(zhǎng)長(zhǎng)的列表，是不是覺(jué)得很困難呀？不要緊，我們接下來(lái)一個(gè)一個(gè)的介紹這些屬性在CSS中是怎樣實(shí)現(xiàn)的（很簡(jiǎn)單喲^_^）。
下一節(jié)我們將首先學(xué)習(xí)Alpha透明屬性的應(yīng)用。
2、alpha屬性
alpha是來(lái)設(shè)置透明度的。先來(lái)看一下它的表達(dá)格式：
filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）
哇，怎么這么長(zhǎng)。是啊，不過(guò)這些參數(shù)都各有其用。
Opacity代表透明度等級(jí)，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀；1代表線形；2代表放射狀；3代表長(zhǎng)方形。
Finishopacity是一個(gè)可選項(xiàng)，用來(lái)設(shè)置結(jié)束時(shí)的透明度，從而達(dá)到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開(kāi)始坐標(biāo)，finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。
從上面講的我們可以看出，如果不設(shè)置透明漸變效果，那么只需設(shè)置opacity這一個(gè)參數(shù)就可以了。說(shuō)了這么多，我們來(lái)看一個(gè)實(shí)例吧（見(jiàn)附件圖一）：
實(shí)現(xiàn)上面這種效果的代碼如下：
<html>
<head>
<title>alpha</title>
<style>//*定義CSS樣式*//
<!--
div{position：absolute； left：50；top：70； width：150； }
//*定義DIV區(qū)域內(nèi)的樣式（位置為絕對(duì)定位，left、top、width的坐標(biāo)）*//
img{position：absolute；top：20；left：40；
filter：alpha(opacity=80)}
//*定義圖片的樣式，絕對(duì)定位，濾鏡屬性是透明度為80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>//*定義字體屬性，前景色為紅色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*導(dǎo)入一張圖片*//
</body>
</html>
如果在上面的代碼中稍做改動(dòng)，則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示：
img{position：absolute；top：20；left：40；
filter：alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}
//*設(shè)置透明漸變效果，起始坐標(biāo)，終止?jié)u變坐標(biāo)，并設(shè)置透明樣式值（style=1）為線形*//
3、blur屬性
假如您用手在一幅還沒(méi)干透的油畫上迅速劃過(guò)，畫面就會(huì)變得模糊。CSS下的blur屬性就會(huì)達(dá)到這種模糊的效果。
先來(lái)看一下blur屬性的表達(dá)式：
filter：blur（add=add，direction，strength=strength）
我們看到blur屬性有三個(gè)參數(shù)：add、direction、strength。
Add參數(shù)有兩個(gè)參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。 Direction參數(shù)用來(lái)設(shè)置模糊的方向。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對(duì)應(yīng)關(guān)系見(jiàn)下表(06.gif)：
Strength參數(shù)值只能使用整數(shù)來(lái)指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是5像素。
還是看一個(gè)例子吧，見(jiàn)下圖 (07.jpg)：
看起來(lái)是不是有些像萬(wàn)花筒，在這個(gè)例子中加入了一些JavaScript的語(yǔ)句，代碼如下：
<html>
<head>
<title>blur css</title>
<script>
function handlechange(obj)
//*設(shè)置一個(gè)循環(huán)函數(shù)handlechange，對(duì)象是obj*//
{ with(obj.filters(0))//*Obj的filter屬性*//
{ if (strength<255)//*設(shè)置循環(huán)條件*//
{ strength +=1；direction +=45；}
//*每循環(huán)一次strength就加1，direction加45度*//
}
}
</script>
</head>
<body>
<p><img id =“img1” src=“ss01087.jpg”
style=“filter：blur(strength=1)”
onfilterchange=“handlechange(this)”>
//*導(dǎo)入一幅圖片，初始blur屬性strength等于1，同時(shí)調(diào)用onfilterchange函數(shù)*//
</p>
</body>
</html>
注：在javascript中blur屬性是這樣定義的：
[oBlurfilter=] object.Filters.blur
這個(gè)例子是Blur屬性的一個(gè)比較復(fù)雜的例子，下一節(jié)我將向您介紹兩個(gè)較簡(jiǎn)單的blur屬性效果。
通過(guò)blur屬性還可以設(shè)置頁(yè)面中的字體。如果把字體的blur屬性add參數(shù)值定義為1，得出來(lái)的字體效果是這樣的（如圖08.gif）：
怎么樣，是不是有些印象派的意思，這種效果的實(shí)現(xiàn)代碼如下：
<html>
<head>
<title>filter blur</title>
<style>//*CSS樣式定義開(kāi)始*//
<!--
div{width：200；
filter：blur(add=true,direction=90,strength=25)；}
//*設(shè)置DIV樣式，濾鏡blur屬性*//
-->
</style>
</head>
<body>
<div style=“width:702； height: 288”>
<p style=“font-family:lucida handwirting italic；
font-size:72；font-style:bold；color:rgb(55,72,145)；” >
LEAF</p>
//*定義字體名稱、大小、樣式、前景色*//
</div>
</body>
</html>
我們看到strength設(shè)置為25，如果把其值再改大一些，就會(huì)達(dá)到非?？鋸埖男Ч瑫r(shí)把Direction參數(shù)值為180
用blur屬性設(shè)置字體可以達(dá)到很多效果，把direction和strength再做修改，還能達(dá)到多種效果，您可以自己修改試一試。
4、Chroma屬性
Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，它的表達(dá)式如下：
Filter：Chroma（color=color）
這個(gè)屬性的表達(dá)式是不是很簡(jiǎn)單，它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來(lái)就可以了。比如下面這幅圖(10.gif)：
圖中顯示兩種字體，兩種顏色，我們現(xiàn)在對(duì)“leaves”字體添加chroma屬性，使其透明。代碼如下：
<html>
<head>
<title>chroma filter</title>
<style>
<!--
div{position：absolute；top：70；width：200；
filter：chroma(color=green)}
//*定義DIV范圍內(nèi)綠色為透明色，另外設(shè)置DIV的位置*//
p{font-family：bailey；font-size：48；font-weight：bold；
color：green} //*設(shè)置P的字體名稱、大小、粗細(xì)、顏色*//
em{font-family:lucida handwriting italic；font-size:48；
font-weight：bold；color：rgb(255,51,153)}
//*設(shè)置EM的字體名稱、大小、粗細(xì)、顏色*//
-->
</style>
</head>
<body>
<div>
<p>LEAVES <em>LOVE</em></p>
</div>
</body>
</html>
通過(guò)上面代碼中對(duì)chroma的屬性設(shè)置，使綠色透明。顯示效果如下圖(11.gif)：
我們看到綠色的leaves字體不見(jiàn)了，實(shí)際上它是透明了，在IE下點(diǎn)擊它所在的區(qū)域，它還是會(huì)顯示出來(lái)（見(jiàn)下圖12.gif）：
另外，需要注意的是，chroma屬性對(duì)于圖片文件不是很適合。因?yàn)楹芏鄨D片是經(jīng)過(guò)了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設(shè)置為透明。
5、DropShadow屬性
DropShadow屬性是為了添加對(duì)象的陰影效果的。它實(shí)現(xiàn)的效果看上去就像使原來(lái)的對(duì)象離開(kāi)頁(yè)面，然后在頁(yè)面上顯示出該對(duì)象的投影。看一看它的表達(dá)式：
Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
Positive=positive）
該屬性一共有四個(gè)參數(shù)： Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數(shù)值來(lái)設(shè)置。如果設(shè)置為正整數(shù)，代表X軸的右方向和Y軸的向下方向。設(shè)置為負(fù)整數(shù)則相反。
Positive參數(shù)有兩個(gè)值：True為任何非透明像素建立可見(jiàn)的投影，F(xiàn)alse為透明的像素部分建立可見(jiàn)的投影。
同樣，我們先來(lái)看一個(gè)例子（見(jiàn)下圖13.gif）：
看，圖中的文字就像是從頁(yè)面上飛出來(lái)一樣，并且留下了一層淡淡的影子。
實(shí)際上在這里應(yīng)用的就是CSS的DropShadow屬性，我們來(lái)看一下它的代碼：
<html>
<head>
<title>dropshadow </title>
<style>//*定義CSS樣式*//
<!--
div {position:absolute；top:20；width:300；
filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；}
-->
//*定義DIV范圍內(nèi)的樣式，絕對(duì)定位，投影的顏色為#FFCCFF，
投影坐標(biāo)為向右偏移15個(gè)像素，向下偏移10個(gè)像素*//
</style>
</head>
<body>
<div>
<p style=“font-family：matisse itc；font-size：64；
font-weight：bold；color：#CC00CC；”>
//*定義字體名稱、大小、粗細(xì)、顏色*//
Love Leaf </p>
</div>
</body>
</html>
和chroma屬性一樣，Dropshadow屬性對(duì)圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。
不能支持的原因與Chroma一樣，因?yàn)檫@種圖象的顏色很豐富，很難找到一個(gè)投射陰影的位置。
6、FlipH、FlipV屬性
Flip是CSS濾鏡的翻轉(zhuǎn)屬性，F(xiàn)lipH代表水平翻轉(zhuǎn)，F(xiàn)lipV代表垂直翻轉(zhuǎn)。它們的表達(dá)式很簡(jiǎn)單，分別是：
Filter：FlipH
Filter：FlipV
我們先來(lái)看一幅圖(14.jpg)：
下面我們分別對(duì)它實(shí)現(xiàn)水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)，并且在圖片上方的一段文字，也發(fā)生翻轉(zhuǎn)。代碼如下：
<html>
<head>
<title>flip css</title>
<style>//*設(shè)置CSS樣式開(kāi)始*//
<!--
div{position：absolute；top：20；width：300；
filter：fliph（flipv）；}
//*定義DIV范圍內(nèi)的樣式，絕對(duì)定位，翻轉(zhuǎn)為水平翻轉(zhuǎn)或垂直翻轉(zhuǎn)。
注意：在這里fliph和flipv只取其中的一個(gè)*//
img{position：absolute；top：70；left：40；
filter：fliph（flipv）；}
//*定義圖片的樣式，絕對(duì)定位，翻轉(zhuǎn)屬性和DIV一樣。*//
-->
</style>
</head>
<body>
<div>
<p style=“font-family：bailey；font-size：36pt；
font-weight：bold； color：rgb(10,128,156)；”>
Leaf Village </p>
//*定義字體名稱、大小、粗細(xì)、顏色*//
</div>
<p><img src=“ss05058.jpg”></p>
//*導(dǎo)入一張圖片*//
</body>
</html>
代碼產(chǎn)生的兩個(gè)效果分別如下圖：( 15.jpg 為 水平翻轉(zhuǎn)；16.jpg 為 垂直翻轉(zhuǎn) )
8、Glow屬性
當(dāng)對(duì)一個(gè)對(duì)象使用“Glow”屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類似發(fā)光的效果。它的表達(dá)式如下：
Filter：Glow（Color=color，Strength=strength）
Glow屬性的參數(shù)只有兩個(gè)：Color是指定發(fā)光的顏色，Strength指定發(fā)光的強(qiáng)度，參數(shù)值從1到255。 讓我們先來(lái)看一下加上Glow屬性的效果圖(17.gif)：
怎么樣，是不是有一種燃燒的火焰的感覺(jué)。實(shí)現(xiàn)這種效果的代碼如下：
<html>
<head>
<title>filter glow</title>
<style>//*開(kāi)始設(shè)置CSS樣式*//
<!--
.leaf{position：absolute； top：20； width：400；
filter：glow(color=#FF3399,strength=15)；}
//*設(shè)置類leaf，絕對(duì)定位，Glow濾鏡屬性，發(fā)光顏色值為#FF3399，強(qiáng)度為15*//
.weny{position：absolute； top：70； left：50； width：300；
filter：glow(color=#9966CC,strength=10)；}
//*設(shè)置類weny，絕對(duì)定位，glow濾鏡屬性，發(fā)光顏色值為#9966CC，強(qiáng)度為15*//
-->
</style>
</head>
<body>
<div class=“leaf”>//*leaf類樣式*//
<p style=“font-family：lucida handwriting；
font-size：54pt；font-weight：bold；color：#003366；”>
Leaf Mylove</p>//*設(shè)置字體名稱、大小、粗細(xì)、顏色*//
</div>
<div class=“weny”>//*weny類樣式*//
<p style=“font-family：bailey； font-size：48pt；
font-weight：bold；color：#99CC66；”>
//設(shè)置字體名稱、大小、粗細(xì)、顏色*//
Weny Good!</p>
</div>
</body>
</html>
您還可以隨意修改顏色值，看看其他的發(fā)光效果是怎樣的。
7、Gray屬性
Gray屬性把一張圖片變成灰度圖。它的表達(dá)式很簡(jiǎn)單：
Filter：Gray
其實(shí)這個(gè)屬性沒(méi)什么好講的，只需在您定義的IMG樣式中加入一句代碼：
{Filter：Gray}就一切OK了。
下面兩幅圖分別代表未加Gray屬性和添加了Gray屬性的效果：
9、Invert屬性
Invert屬性可以把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度和亮度值。
它的表達(dá)式也很簡(jiǎn)單：
Filter：Invert
我們?cè)賮?lái)看一下加上Invert屬性前后的圖片效果變化：
我們看到Invert屬性實(shí)際上達(dá)到的是一種“底片”的效果。
自己拿別的圖來(lái)試試吧。
10、Mask屬性
Mask屬性為對(duì)象建立一個(gè)覆蓋于表面的膜。它的表達(dá)式也很簡(jiǎn)單：
Filter：Mask（Color=顏色）
只有一個(gè)Color參數(shù)，用來(lái)指定使用什么顏色作為掩膜。
同樣，我們來(lái)看一下一幅圖片在加上mask屬性前后的效果（見(jiàn)圖 22.gif 為 原圖 ; 23.gif 為 加了Mask屬性的效果圖）：
加上MASK屬性的效果就好象是在用有色眼鏡看物體一樣。上面的效果的代碼如下：
<html>
<head>
<title> mask filter </title>
<style>//*設(shè)置CSS樣式開(kāi)始*//
<!--
div{position：absolute；top：20；left：40；
filter：mask(color：#666699)；}
//*定義DIV區(qū)域的樣式，絕對(duì)定位，mask屬性的color參數(shù)值指定用什么顏色遮住對(duì)象*//
p{font-family：bailey；font-size：72pt；
font-weight：bold；color：#FF9900；}
//*定義P區(qū)域內(nèi)的樣式，字體名稱、大小、粗細(xì)、前景色*//
-->
</style>
</head>
<body>
<div>
<p> wenyleaf </p>
</div>
</body>
</html>
其實(shí)，您就算在代碼中去掉對(duì)字體前景色的定義，得到的效果還是一樣的。因?yàn)橛辛薓ask屬性的定義，它遮罩下的字體顏色的設(shè)置就已經(jīng)失去了意義。
還有一點(diǎn)需要您注意的地方，mask屬性對(duì)圖片文件的支持還是不夠，不能達(dá)到應(yīng)該有的效果。
11、Shadow屬性
Shadow屬性可以在指定的方向建立物體的投影。它的表達(dá)式是這樣的：
Filter：Shadow（Color=color，Direction=direction）
在這里，Shadow有兩個(gè)參數(shù)值：Color參數(shù)用來(lái)指定投影的顏色；Direction參數(shù)用來(lái)指定投影的方向。
這里說(shuō)的方向與我們?cè)诘诙?jié)Blur屬性中提到的“方向與角度的關(guān)系”是一樣的。 也許您會(huì)問(wèn)，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
光說(shuō)的話，您恐怕還難以理解，讓我們看一看分別利用這兩個(gè)屬性做出來(lái)的效果有什么不同（見(jiàn)圖 24.gif 為 Shadow效果 ; 25.gif 為 Dropshadow效果）：
這樣一對(duì)比，就可以很明顯的看出兩者的不同。
Shadow屬性可以在任意角度進(jìn)行投射陰影，Dropshadow屬性實(shí)際上是用偏移來(lái)定義陰影的。所以，看上去左圖的文字和陰影就像是一體的，而右圖的文字就像脫離了陰影一樣。
本例的代碼如下：
<html>
<head>
<title> shadow</title>
<style>//*開(kāi)始設(shè)置CSS樣式*//
<!--
.shadow{position:absolute；top:20；width:300；
filter:shadow(color=#cc66ff,direction=225)；}
//*定義Shadow類的樣式，絕對(duì)定位，Shadow屬性，陰影顏色、投影方向*//
.dropshadow{position:absolute；top:180；width:300；
filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
//*設(shè)置Dropshadow類的樣式，樣式與Shadow類相似， 不同的是濾鏡用了Dropshadow屬性，設(shè)置X軸和Y軸的偏移量*//
-->
</style>
</head>
<body>
<div class=“shadow”>//*區(qū)域內(nèi)為Shadow類*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定義字體名稱、大小、粗細(xì)、前景色*//
</div>
<div class=“dropshadow”>//*區(qū)域內(nèi)為Dropshadow類*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定義字體樣式與Shadow類的一樣*//
</div>
</body>
</html>
12、Wave屬性
Wave屬性用來(lái)把對(duì)象按照垂直的波紋樣式打亂。它的表達(dá)式如下：
Filter：Wave（Add=True（False），F(xiàn)req=頻率，LightStrength=增強(qiáng)光效，Phase=偏移量，Strength=強(qiáng)度）
我們看到Wave屬性的表達(dá)式還是比較復(fù)雜的，它一共有五個(gè)參數(shù)。Add參數(shù)有兩個(gè)參數(shù)值：True代表把對(duì)象按照波紋樣式打亂；False代表不打亂；
Freq參數(shù)指生成波紋的頻率，也就是指定在對(duì)象上共需要產(chǎn)生多少個(gè)完整的波紋。 LightStrength參數(shù)是為了使生成的波紋增強(qiáng)光的效果。參數(shù)值可以從0到100。 Phase參數(shù)用來(lái)設(shè)置正弦波開(kāi)始的偏移量。這個(gè)值的通用值為0，它的可變范圍為從0到100。這個(gè)值代表開(kāi)始時(shí)的偏移量占波長(zhǎng)的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開(kāi)始。
說(shuō)了一大堆，我們還是先看一個(gè)實(shí)例吧。比如下面這幅圖片（26.gif）：
下面我們對(duì)上面這個(gè)頁(yè)面加上Wave效果，代碼如下：
<html>
<head>
<title> wave css</title>
<style>//*定義CSS 樣式開(kāi)始*//
<!--
.leaf{position:absolute；top:10；width:300；
filter:wave(add=true,freq=3,lightstrength=100,
phase=45,strength=20)；}
//*設(shè)置leaf類的樣式，絕對(duì)定位，wave屬性，產(chǎn)生3個(gè)波紋， 光強(qiáng)為100，波紋從162度（360*45%）開(kāi)始，振幅為20*//
img{position:absolute;top:110;left:40;
filter:wave(add=true,freq=3,lightstrength=100,
phase=25,strength=5)；}
//*設(shè)置IMG的樣式，絕對(duì)定位，wave屬性，產(chǎn)生3個(gè)波紋，光強(qiáng)為100，波紋從90度開(kāi)始，振幅為5*//
-->
</style>
</head>
<body>
<div class=“wave”>//*定義DIV區(qū)域內(nèi)為Wave類*//
<p style=“font-family：lucida handwriting；
font-size=72pt； font-weight：bold；
color：rgb(189,1,64)；”>Leaf</p>
//*設(shè)置字體名稱、大小、粗細(xì)、顏色*//
</div>
<p><img src=“ss01044.jpg”></p> //*導(dǎo)入圖片*//
</body>
</html>
這段代碼實(shí)現(xiàn)的效果如下圖(27.gif)：
如果把Wave的參數(shù)隨便做一下改動(dòng)，就會(huì)達(dá)到多種效果，請(qǐng)看另外一種效果：（如圖28.gif）：
其實(shí)這種效果只是增大了freq參數(shù)的值，減小了Strength、LightStrength的值就可以了。您也可以多試試，改變其他的參數(shù)值，還可以達(dá)到許多不同的效果來(lái)。
13、Xray屬性
Xray就是X射線的意思。
Xray屬性，顧名思義，這種屬性產(chǎn)生的效果就是使對(duì)象看上去有一種X光片的感覺(jué)。 它的表達(dá)式很簡(jiǎn)單：
Filter：Xray
我們還是先來(lái)看一個(gè)頁(yè)面（如下圖 29.jpg）：
如果在上面的頁(yè)面中加入Xray屬性，也就是在<head>的<Style>中，增添下面這一句代碼：
Filter：Xray
您再看這個(gè)頁(yè)面就會(huì)是另一種效果了：（如圖30.jpg）
看，是不是就像給它拍了一張X光片一樣。
