本站原創內容,轉載請注明出處網頁教學網。
十.CSS 濾境的詳細介紹1ALPHA 屬性
【Alpha濾鏡屬性】這個名字，在Flash和Photoshop經常見到。它們的作用基本類似，就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標，可以指定點、線、面的透明度。由於“Alpha”濾鏡的參數多，我們先來看一下下圖：
“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濾鏡對一般圖片無效，但我們把圖片放到表格中，再給表格的<td>加載 Dropshadow濾鏡，將會產生一種圖片有了立體邊框的效果。
FLIPH 屬性
【FlipV 屬 性】FlipV是一個垂直翻轉對象的濾鏡，當把FlipV加載到一個對象上，該對象將產生一個垂直鏡象，以此來創造垂直翻轉的效果；它是無參數濾鏡之一。功能單一，使用方便，效果顯著。