css 濾境的詳細介紹

導讀：

　　【alpha濾鏡屬性】這個名字，在flash和photoshop經常見到。它們的作用基本類似，就是把一個目标元素與背景混合。你可以指定數值來控制混合的程取ｕ庵幀壩氡塵盎旌稀蓖ㄋ椎厮稻褪且桓鲈 氐耐該鞫取ｍü 付ㄗ 辏 梢災付ǖ恪⑾摺⒚娴耐該鞫取ｓ捎凇癆lpha”濾鏡的參數多，我們先來看一下下圖：

　　“opacity”：代表透明度程度。範圍是從0~100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。

　　“finishopacity”：是一個可選參數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。

　　“style”：指定了透明區域的形狀特征。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

　　“startx”和“starty”：代表漸變透明效果的開始x和y坐标。

　　“finishx”和“finishy”：代表漸變透明效果結束x和y坐标。

　　blendtrans 屬性

　　【blendtrans屬性】淡入淡出的效果濾鏡，能産生極精細的圖檔轉換效果。

　　blendtrans濾鏡功能也比較單一，隻有一個參數：duration（變換時間）。需要借助于 javascript來調用它的方法來實作轉換功能。使用blendtrans濾鏡，首先您要準備幾張寬高尺 寸相同的圖檔，并分别命名，儲存在圖像目錄下，如：images/*.jpg。如果用4幅的話，分别 取名為：blen1.jpg； blen2.jpg； blen3.jpg；blen4.jpg。

　　blur屬性

　　【blur屬性】把blur濾鏡加載到文字上，可産生立體字的效果，加載到圖檔上，可以産生風吹模糊效果。不僅美化了網頁，也為你的網頁減輕了分量。

　　下面介紹一下blur濾鏡的參數，以便你靈活應用：

　　add：是否讓blur濾鏡起作用，add=false(或“0”)時blur濾鏡不起作用，取true（或非“0”值）時blur濾鏡起作用，隻有兩個值，即true和false；

　　direction：陰影的方向，取值範圍0~360度，45度一個間隔，是以實際上隻有八個方向值；

　　strength：它代表有多少個像素的寬度成為陰影，你也可以簡單地了解為陰影的長度。它隻能用整數來指定，預設值是5個像素，你可以根據實際需要來指定陰影的長度。我上面的兩個圖檔例子是用的同一個濾鏡，strength是10個像素。同一網頁中對不同的對象可以使用不同參數的blur濾鏡，你隻要給它們取不同的名稱就行了。

　　chroma 屬性

　　【chroma屬性】　chroma屬性可以設定一個對象中指定的顔色為透明色，它的表達式如下：

　　filter：chroma（color=color）

　　這個屬性的表達式是不是很簡單，它隻有一個參數。隻需把您想要指定透明的顔色用 color參數設定出來就可以了。

　　dropshadow 屬性

　　【dropshadow屬性】作用是添加對象的陰影效果。實際效果看上去就象是原來的對象離開了頁面，然後在頁面上顯示出該對象的投影。其工作原理是建立一個偏移量，然後加上顔色。

　　dropshadow濾鏡有四個參數，它們的含義為：

　　“color”：代表投射陰影的顔色。

　　“offx”和“offy”：分别是x方向和y方向陰影的偏移量，它必須用整數值，如果是正整數，那麼表示陰影向x軸的右方向和y軸的下方向。若是負整數值，陰影的方向正好相反。另外“offx”和“offy”數值的大小決定了陰影離開對象的距離；

　　“positive”參數：如果為“true（非0）”，那麼就為任何的非透明像素建立可見的投影。如果為“fasle（0）”，那麼就為透明的像素部分建立透明效果。

　　對文字加載dropshadow濾鏡比較友善的辦法，是把dropshadow濾鏡加載到文字所在的表格單元格< td >上。文字比較小時，使用dropshadow的效果不太理想，是以一般用于制作稍大的标題字。

　　dropshadow濾鏡對一般圖檔無效，但我們把圖檔放到表格中，再給表格的加載 dropshadow濾鏡，将會産生一種圖檔有了立體邊框的效果。

　　fliph 屬性

　　【flipv 屬 性】flipv是一個垂直翻轉對象的濾鏡，當把flipv加載到一個對象上，該對象将産生一個垂直鏡象，以此來創造垂直翻轉的效果；它是無參數濾鏡之一。功能單一，使用友善，效果顯著。

　　css 濾境的詳細介紹2

　　glow 屬性

　　【glow屬性】對象應用glow 濾鏡後，這個對象的邊緣就會産生類似發光的效果，這種效果在圖像處理軟體中做起來比較麻煩，而在dw mx 2004中用css摹癵low”濾鏡來制作卻是很簡單，而且節約不少位元組。

　　“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清單格，在表格裡輸入文字，選擇表格的單元格，然後，在屬性面闆“樣式”菜單中選“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 标簽樣式中的屬性。

本文轉自

http://hi.baidu.com/licustom/blog/item/ab9c29fa9ea5a18a9f514663.html