CSS手冊－－ＣSS濾鏡
編輯：CSS詳解
CSS提供了一些內置的多媒體濾鏡特效，使用這種技術可以把可視化的濾鏡和轉換效果添加到一個標准的HTML元素上，例如圖片、文本容器、以及其他一些對象。Dreamweaver4提供了16種濾鏡可供選擇，如下圖：
下面，我們就來看看在Dreamweaver4裡如何方便的使用這些CSS濾鏡。
建立一個自定義樣式“.filter”，在Filter下拉框裡選Alpha濾鏡，我們將“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity參數設為50，後面的參數都刪掉，如下圖：
按OK後就建立了一個“.filter”的自定義樣式，我們把這個樣式應用到圖片上，圖片就是半透明的了。如果把這個樣式應用到表格上，表格也變成了半透明狀態了。注意所有濾鏡效果都要在浏覽器裡才能看到。下面是原碼：
<style type="text/css">
<!--
.filter { filter: Alpha(Opacity=50)}
-->
</style>
注意：這個例子我們沒有用到後面的幾項參數，只用到Opacity參數，所以將其他參數刪掉。
下面我們來講解每個濾鏡的效果和參數：
1. Alpha：設置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：設置漸變的透明效果時，用來指定結束時的透明度，范圍也是0 到 100。
Style：設置漸變透明的樣式，值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
StartX和StartY：代表漸變透明效果的開始X和Y坐標。
FinishX和FinishY：代表漸變透明效果結束X和Y 的坐標。
2. BlendTrans：圖像之間的淡入和淡出的效果
BlendTrans(Duration=?)
Duration：淡入或淡出的時間。
注意：這個濾鏡必須配合JS建立圖片序列，才能做出圖片間效果。
3. Blru：建立模糊效果
Blur(Add=?, Direction=?, Strength=?)
Add：是否單方向模糊，此參數是一個布爾值，true（非0）或false（0）。
Direction：設置模糊的方向，其中0度代表垂直向上，然後每45度為一個單位。
Strength：代表模糊的象素值。
4. Chroma：把指定的顏色設置為透明
Chroma(Color=?)
Color：是指要設置為透明的顏色。
5. DropShadow：建立陰影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color：指定陰影的顏色。
OffX：指定陰影相對於元素在水平方向偏移量，整數。
OffY：指定陰影相對於元素在垂直方向偏移量，整數。
Positive：是一個布爾值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內陰影。
6. FlipH：將元素水平反轉
7. FlipV：將元素垂直反轉
8. Glow：建立外發光效效果
Glow(Color=?, Strength=?)
Color：是指定發光的顏色。
Strength：光的強度，可以是1到255之間的任何整數，數字越大，發光的范圍就越大。
9. Gray：去掉圖像的色彩，顯示為黑白圖象
10. Invert：反轉圖象的顏色，產生類似底片的效果
11. Light：放置光源的效果，可以用來模擬光源在物體上的投影效果
注意：此效果需要用JS設置光的位置和強度。
12. Mask：建立透明遮罩
Mask(Color=?)
Color：設置底色，讓對象遮住底色的部分透明。
13. RevealTrans：建立切換效果
RevealTrans(Duration=?, Transition=?)
Duration：是切換時間，以秒為單位。
Transtition：是切換方式，可設置為從0到23。
注意：如果做頁面間的切換效果，可以在<head>區加上一行代碼：<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在頁面裡的元素必須配合JS使用。
14. Shadow：建立另一種陰影效果
Shadow(Color=?, Direction=?)
Color：是指陰影的顏色。
Direction：是設置投影的方向，0度代表垂直向上，然後每45度為一個單位。
15. Wave：波紋效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。
Freq：設置波動的個數。
LightStrength：設置波浪效果的光照強度，從0到100。0表示最弱，100表示最強。
Phase：波浪的起始相角。從0到100的百分數值。（例如：25相當於90度，而50相當於180度。）
Strength：設置波浪搖擺的幅度。
16. Xray：顯現圖片的輪廓，X光片效果
注意：在使用CSS濾鏡時，必須使用在有區域的元素，比如表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素我們可以設置元素的Height和Width樣式或坐標來實現。
看下面這個例子，我們對一行文字做陰影效果（dropshadow），新建自定義樣式.shadow，在filter下拉框裡選擇“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，我們設置為“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然後把定義好的樣式應用在頁面中，我們發現在表格裡的文字有了陰影，而段落裡的文字卻沒有陰影。點CSS Styles面板裡的編輯樣式表按鈕，給樣式加上Hight屬性：
為了不影響原來對象的高度，我們設置的高度不能超過字體本身的高度，這裡我設置高度為1。OK後，在浏覽器中可以看到段落裡的文字也有陰影了。自己動手試一下 ，呵呵
漢網天下（http://www.hanwangtx.com）版權所有，轉載請注明出處。
小編推薦
熱門推薦