Mask濾鏡可以為網(wǎng)頁(yè)上的HTML元件對(duì)象作出一個(gè)矩形遮罩，關(guān)于什么是遮罩?如果你用過(guò)Flash中的遮罩，你就會(huì)知道了，就是那個(gè)樣子了。實(shí)際上對(duì)于遮罩你也可以這樣來(lái)理解，相當(dāng)于用一塊有色布把物件蓋起來(lái)，但內(nèi)容卻被挖去了。若你還不明白，就看下面的圖片再聽(tīng)我給你細(xì)說(shuō)。

　　圖1　mask濾鏡效果1

　　在上面這mask濾鏡中用這么深的顏色，主要是讓你能清楚地看出效果來(lái)。讓我們來(lái)看一下mask濾鏡的參數(shù)： 它只有一個(gè)參數(shù)Color，即遮罩的顏色 以#RRGGBB 格式的顏色值。 你只要在DW3中給它選擇一種適合的顏色就OK了，如上面的mask濾鏡代碼就是：.mask1 { filter:mask(color=#00ff00) }，在下面的例子中你會(huì)看到，其實(shí)濾鏡的顏色不是主要的，關(guān)鍵的倒是背景的顏色。
　　下面我們用mask濾鏡做幾個(gè)特效：
　　1、五彩繽紛的文字

　　圖2　mask濾鏡效果2

　　上面這種效果怎么樣，還不錯(cuò)吧！有點(diǎn)象圖象是不是？這就是mask濾鏡的效果。這里用了個(gè)白色濾鏡，其代碼是：.mask1 { filter:mask(color=#ffffff) }。五彩繽紛的文字顏色實(shí)際上就是背景的顏色。其制作方法也很簡(jiǎn)單，就是插入一個(gè)1*1的表格，給表格加上多彩色的背景，在表格中輸入文字，給單元格加載一個(gè)mask 濾鏡，就做好了，不難吧？！
　　2、探照燈動(dòng)畫效果
　　下面的這種探照燈效果，用Flash做都要費(fèi)點(diǎn)神，想不到用CSS濾鏡卻也能做出來(lái)！由于探照燈效果是動(dòng)態(tài)的，我只能抓兩張過(guò)程圖片給你看看，要看動(dòng)態(tài)效果，那你就根據(jù)我講的動(dòng)手做一個(gè)或去我家（http:/fym888.go.163.com）看。

　　圖3　探照燈動(dòng)畫效果1

　　圖4　探照燈動(dòng)畫效果2

　　下面介紹制作方法：
　　這種效果比起上面的例子來(lái)要復(fù)雜一點(diǎn)，但也就是多點(diǎn)幾次鼠標(biāo)而已。
　　1、插入一個(gè)圖層，我稱其為“父層”，該層用來(lái)放要顯示的內(nèi)容（文字或圖片）。再在該層上插入一個(gè)層，我稱其為子層，它主要用來(lái)產(chǎn)生遮罩效果。
　　2、在父層的屬性面板上設(shè)置顯示窗口，也就是設(shè)置圖層的“Clip”屬性，在該屬性中用的是相對(duì)坐標(biāo)，其中：L、T是左上角坐標(biāo)；R、B 是右下角坐標(biāo)。以后的子層將只有在你設(shè)置的窗口中才顯示。設(shè)置好的層屬性參數(shù)面板如下圖所示：

　　圖5　層屬性面板

　　我這里的父層是“Layer4”，我在這里把整個(gè)父層都作為顯示窗口，也就是當(dāng)子層運(yùn)動(dòng)到父層時(shí)就可見(jiàn)，在父層之外不可見(jiàn)。
　　3、我們?cè)谧訉由喜逡粋€(gè)背景透明的圓形圖片，這里用圓圖形的目的主要是探照燈光的投影是個(gè)似圓形，另外圓外的圖象部分必須透明，否則看到的將是一個(gè)矩形方框在移動(dòng)。然后在子層上加載一個(gè)顏色與父層背景顏色相同的mask濾鏡，并把子層拉大，使其能完全覆蓋父層的內(nèi)容,這樣在瀏覽器中父層上的內(nèi)容就只有圓形圖片那一部分能看見(jiàn)，這正是我們希望的效果。
　　4、當(dāng)然要產(chǎn)生探照燈的效果，就要使那塊圓形區(qū)域動(dòng)起來(lái)，這就要用Dreamweaver的時(shí)間線（Timeline)功能了。在DW3中先拖到子層，使其上的圖片正好覆蓋父層內(nèi)容的首部，按“Ctrl+F9”，調(diào)出時(shí)間線面板，把子層拖到時(shí)間線面板上，把最后一幀拖到100幀，再在第50幀插入一個(gè)關(guān)鍵幀，并把子層的圖片與父層內(nèi)容的尾部重合，在時(shí)間線面板上選取“Loop”（循環(huán)播放）和“Auto”（自動(dòng)播放），一切OK。
　　一幅復(fù)雜的動(dòng)畫完成，按F12看看，是不是有點(diǎn)酷？！