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屬性：
為了不影響原來對象的高度，我們設定的高度不能超過字型本身的高度。OK後，在瀏覽器中可以看到段落裡的文字也有陰影了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
