用CSS濾鏡修飾文字

用CSS濾鏡修飾文字

CSS是Cascadin Style Sheets的簡稱，中文意思是“串聯式排版樣式”，也稱“串接樣式表”。它是統一HTML標準的“W3C”的工業合作組織於1996年5月製定的第一個排版樣式標準，是對HTML功能的補充。CSS並非一種程序設計語言，它隻是一種用於頁麵設計的、由設計者提供的手段，其主要功能是通過對HTML標記進行設定，對網頁中的對象進行有效控製，使網頁能夠按照設計者的意願來顯示。
本文將介紹幾個CSS濾鏡(用來修飾文本），以此向大家展示CSS的強大功能。讀者將在閱讀代碼和觀賞文本特效中為CSS所製作出的文字特效而心動不已。請記住：CSS濾鏡隻不過是CSS眾多的功能之一，可謂冰山一角而已，更多的功能請查閱有關CSS教程。

一、Alpha濾鏡
請先觀察以下效果：
我愛想唱就唱！
代碼：<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>我愛想唱就唱！</B></FONT>
從效果中我們可以看出，Alpha濾鏡使對象呈漸變透明的效果，其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中：
opacity屬性：設置透明度，取值0至100之間的任意數值，100表示完全不透明；style屬性：設置漸變風格，0表示均勻漸變，1表示線性漸變，2表示放射漸變，3表示直角漸變。
而width:100%則表示參與漸變的對象的寬度，通常都設置為100%。

二、Motion Blur濾鏡
Motion Blur濾鏡表現的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標，其值為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>

三、Drop Shadow濾鏡
Drop Shadow濾鏡主要產生重疊效果。其屬性為：
color屬性：設置影子文本的顏色；
offX和offY屬性：影子文本下落的位移值；
Positive屬性：指定透明象素陰影，布爾型，0為是，1為否。
實例代碼及效果：
我愛想唱就唱！
<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>

四、Shadow濾鏡
與Drop Shadow的影子特性不同，Shadow濾鏡產生一種陰影效果，它的屬性比較簡單：
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濾鏡
此濾鏡對過濾對象生成正弦波變形，造成一種變幻效果。內嵌屬性：
add屬性：布爾型，0或1，0表示將原始對象加入最後效果中，1則反之；

freq屬性：決定顯示的頻率，即應出現多少個波形；
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濾濾鏡主要是產生兩種變換效果，即上下變換和左右變換。FlipV產生上下變換，FlipH產生左右變換。
我愛想唱就唱！<FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>我愛想唱就唱！</B></FONT>