Dreamweaver MX 2004 CSS使用教程之濾鏡介紹2

css|dreamweaver|教程|濾鏡

　　本站原創內容,轉載請註明出處網頁教學網。

　　 十一.CSS 濾境的詳細介紹2

　　GLOW 屬性

　　【glow屬性】對象應用glow 濾鏡後，這個對象的邊緣就會產生類似發光的效果，這種效果在影像處理軟體中做起來比較麻煩，而在DW MX 2004中用CSS的“glow”濾鏡來製作卻是很簡單，而且節約不少位元組。

　　“glow”濾鏡只有兩個參數，一個是“color”是指定發光的顏色，另一個參數是 “strength”是發光的強度，也可理解為光芒的長度。取值範圍1～255之間的任何整數。下面 我們來做幾個應用執行個體。

　　【glow濾鏡在圖片上的應用】

　　“glow”濾鏡載入到一般圖片無效，但若是把圖片放到表格中，再給表格的< td >加上“glow”濾鏡，卻能使圖片產生一個漸層顏色的邊框。

　　glow濾鏡的參數不多，使用簡單，效果明顯。在具體應用時關鍵的問題是光芒顏色的選擇，要與整個頁面色彩協調。給圖片和< td >可以用多種方式載入，配合背景的設定，可產生一些奇特的效果。

　　GRAY 屬性

　　【Gray 屬性】 Gray 濾鏡可把一張彩色圖片轉變為灰階圖，即黑白圖片。可應用於創意特殊題材，Gray為無參數濾鏡，功能單一，操作簡單，效果明顯。

　　INVERT屬性

　　【Invert 屬性】 Invert 濾鏡可把一張圖片轉變為負片，好像相片的底片。可應用於創意特殊題材，Invert為無參數濾鏡，功能單一，操作簡單，效果明顯。

　　LIGHT 屬性

　　【Light屬性】Light濾鏡能產生一個類比光源的效果。可應用於特殊場合，營造奇特的氣氛。Light濾鏡是無參數濾鏡，使用它要通過Javascrpt調用來實現類比光源的效果。

　　MASK 屬性

　　【Mask 屬性】Mask濾鏡可以為網頁元件對象產生一個矩形遮罩效果，實際也可以理解為用一塊有色布把物件蓋起來，但內容卻被挖去了。

　　【Mask濾鏡應用】

　　在頁面適當位置插入1行1列表格，在表格裡輸入文字，選擇表格的儲存格<td>，然後，在屬性面板“樣式”菜單中選“Mask”。

　　REVEALTRANS 屬性

　　RevealTrans是動態濾鏡，它能產生23種動態效果，更為奇妙的是它還能在23種動態效果中隨機抽取其中一種。

　　RevealTrans濾鏡只有兩個參數，Duration：是切換時間，以秒為單位；Transition：是切換方式，它有23種方式，詳見下圖：

　　你只要改變“Transition"的值，就能獲得不同的效果。它必須藉助於Javascript才能實現，Javascript的設定方法請參考【BlendTrans屬性】。

　　SHADOW 屬性

　　【Shadow 屬性】利用“Shadow”濾鏡可以在指定的方向建立物體的投影。投影的顏色可以指定。

　　WAVE 屬性

　　【Wave屬性】 是把對象按照垂直的波形樣式扭曲，而產生一種特殊的效果。 把“wave”濾鏡載入到文字上，就可得到波形文字的效果。

　　提示：Wave濾鏡共有5個參數：

　　“add”：表示是否要把對象按照波形式樣扭曲，它只有兩個值，即"true"和"false",預設值是"true（非0）"，當然你也可以修改它的值為"false"（"0"）。

　　“freq”：是波紋的頻率，也就是指定在這個對象上面一共需要產生多少個完整的波紋。

　　“lightstrength”：參數可以對于波紋增強光影的效果。它的參數值範圍是從0到100的整數值。

　　“phase”：參數用來設定正弦波開始的位移量。這個位移量的通用值為0，但是你可以改變它。它的值從0到100之間，這個數值代表開始時的位移量取自波長的百分比值。 例如如果值為25那麼正弦波就從90度的方向開始。

　　“strength”：表示波形的振幅大小，也可以簡單的理解為扭曲的程度。

　　XRAY 屬性

　　【Xray 屬性】 Xray 濾鏡可把對象的輪廓顯現出來並將其加亮。就象“X光片”一樣。可應用於創意特殊題材，Xray為無參數濾鏡，功能單一，操作簡單，效果明顯。

　　應用類樣式

　　【應用類樣式】是唯一可以應用於文檔中任何文本的 CSS 樣式類型。與當前文檔關聯的所有類樣式都顯示在“CSS 樣式”面板中和文字屬性檢查器的“樣式”彈出式菜單中。

　　提示：當預覽外部 CSS 樣式表中定義的樣式時，務必要儲存該樣式表以確保所做的更改。

　　【應用自訂 CSS 樣式】

　　在文檔中，選擇要應用 CSS 樣式的文本。

　　將插入點放在段落中將樣式應用於整個段落。

　　如果在單個段落中選擇一個文本範圍，則 CSS 樣式隻影響所選範圍。

　　若要指定要應用 CSS 樣式的確切標籤，請在位於“文檔”視窗左下角的標籤選取器中選擇標籤。

　　請執行下列操作之一：

　　在“CSS 樣式”面板（“視窗”>“CSS 樣式”）中，按右鍵要應用的樣式的名稱，然後從操作功能表選擇“套用”。

　　在文字屬性檢查器中，從“樣式”彈出式菜單中選擇要應用的類樣式。

　　在“文檔”視窗中，按右鍵所選文本，在操作功能表中選擇“CSS 樣式”，然後選擇要應用的樣式。

　　選擇“文本”>“CSS 樣式”，然後在子功能表中選擇要應用的樣式。

　　【將自訂樣式從選定內容中刪除】

　　選擇要刪除樣式的對象或文本。 執行下列操作之一：

　　在文字屬性檢查器中，從“樣式”彈出式菜單中選擇“無”。

　　在“相關 CSS”選項卡中按右鍵要刪除的已應用規則，然後從操作功能表中選擇“設定類”>“無”。

　　【關於 CSS 樣式的衝突】將兩個或更多的 CSS 樣式應用於同一文本時，這些樣式可能發生衝突併產生意外的結果。瀏覽器根據以下規則應用樣式屬性：

　　如果將兩種樣式應用於同一文本，瀏覽器顯示這兩種樣式的所有屬性，除非特定的屬性發生衝突。例如，一種樣式可能將藍色指定為文本顏色，而另一種樣式可能指定紅色作為文本顏色。

　　如果應用於同一文本的兩種樣式的屬性發生衝突，則瀏覽器顯示最裡面的樣式（離文本本身最近的樣式）的屬性。因此，如果外部樣式表和內聯 CSS 樣式同時影響文本元素，則應用內聯樣式。

　　如果有直接衝突，則 CSS 樣式（使用 class 屬性應用的樣式）中的屬性將取代 HTML 標籤樣式中的屬性。

　　更多有關CSS濾境應用的知識請去CSS教學頻道去查看