HTML學(xué)習(xí)班第五課
CSS濾鏡知識
上節(jié)課我們學(xué)習(xí)了“文字和圖片的移動”今天我們來說說：“CSS濾鏡”：
CSS是Cascadin Style Sheets的簡稱，中文意思是“串聯(lián)式排版樣式”，也稱“串接樣式表”。它是統(tǒng)一HTML標(biāo)準(zhǔn)的“W3C”的工業(yè)合作組織于1996年5月制定的第一個排版樣式標(biāo)準(zhǔn)，是對HTML功能的補充。CSS并非一種程序設(shè)計語言，它只是一種用于頁面設(shè)計的、由設(shè)計者提供的手段，其主要功能是通過對HTML標(biāo)記進行設(shè)定，對網(wǎng)頁中的對象進行有效控制，使網(wǎng)頁能夠按照設(shè)計者的意愿來顯示。
本文將介紹幾個CSS濾鏡(用來修飾文本），以此向大家展示CSS的強大功能。讀者將在閱讀代碼和觀賞文本特效中為CSS所制作出的文字特效而心動不已。請記住：CSS濾鏡只不過是CSS眾多的功能之一，可謂冰山一角而已，更多的功能請查閱有關(guān)CSS教程。
一、Alpha濾鏡
代碼：
<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>Alpha濾鏡效果</B></FONT>
從效果中我們可以看出，Alpha濾鏡使對象呈漸變透明的效果，其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中：
opacity屬性：設(shè)置透明度，取值0至100之間的任意數(shù)值，100表示完全不透明；
style屬性：設(shè)置漸變風(fēng)格，0表示均勻漸變，1表示線性漸變，2表示放射漸變，3表示直角漸變。
而width:100%則表示參與漸變的對象的寬度，通常都設(shè)置為100%。
LINE-HEIGHT:150%（線性高度）代表字與上面的距離數(shù)字越大，字就越向下。
例：<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>Alpha濾鏡效果</B></FONT>
學(xué)習(xí)班朋友們好
效果圖
朋友們看了效果圖不難理解Alpha濾鏡主要用于文字和圖片的漸變效果，它主要是表現(xiàn)在以下幾個方面：
1：0表示均勻漸變
2：1表示線性漸變
3：2表示放射漸變
4：3表示直角漸變
朋友們可以根據(jù)不同的效果設(shè)置style屬性及width和LINE-HEIGHT各自的參數(shù)。就可得到朋友們想要的效果來。朋友們可以試一下！OK
二、Motion Blur濾鏡
Motion Blur濾鏡表現(xiàn)的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標(biāo)，其值為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>
朋友們這是投影效果
朋友們從效果圖中可以看到這種模糊效果有點象3D中的投影效果，注意以下幾個屬性就可以想怎么設(shè)置就怎么設(shè)置。
FONT-SIZE:30pt字體的大小
add=1表示模糊的目標(biāo)。0表示“否”，用于文字，1表示“是”，用于圖像
Direction屬性是模糊移動的角度，其值為0至360度
Strength屬性是模糊移動的距離
三、Drop Shadow濾鏡
實例代碼及效果：
朋友們看字的陰影有顏色了
<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>
它的主要特點：透明象素陰影。Drop Shadow濾鏡主要產(chǎn)生重疊效果。其屬性為：
color屬性：設(shè)置影子文本的顏色；
offX和offY屬性：影子文本下落的位移值；
Positive屬性：指定透明象素陰影，布爾型，0為是，1為否。
Drop Shadow濾鏡主要是陰影可以設(shè)置顏色。
四、Shadow濾鏡
與Drop Shadow的影子特性不同，Shadow濾鏡產(chǎn)生一種陰影效果，它的屬性比較簡單：
它的陰影是向下的
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濾鏡
此濾鏡對過濾對象生成正弦波變形，造成一種變幻效果。內(nèi)嵌屬性：
add屬性：布爾型，0或1，0表示將原始對象加入最后效果中，1則反之；
freq屬性：決定顯示的頻率，即應(yīng)出現(xiàn)多少個波形；
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濾濾鏡主要是產(chǎn)生兩種變換效果，即上下變換和左右變換。FlipV產(chǎn)生上下變換，F(xiàn)lipH產(chǎn)生左右變換。
冰山火焰
<FONT style="FONT-SIZE:30pt;filter:FlipV(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>冰山火焰</B></FONT>
冰山火焰
<p align=right><FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>冰山火焰</B></FONT></p>
下面再給一個例子。這個例子用CSS的濾鏡來改造WMP播放機插件的外觀，代碼和效果分別如下：
這一節(jié)的代碼如下（紅色部分就是CSS樣式表代碼）：
<p align=center><EMBED id="wmp01" style="FILTER: invert(); WIDTH: 400px;HEIGHT: 50px" src="音樂地址" type=audio/mpeg volume="0" loop="true" autostart="true" ShowStatusBar="1"></p>
