今天本想學習一下CSS的濾鏡,可是不知道為什么FF就不買賬,就是不肯顯示效果.倒是IE不錯,所有的濾鏡效果都出來了.
難道這些濾鏡都是針對IE的嗎?有點不明白.下面是一些濾鏡的描述,有的有示范,有的沒有.(
示范應該顯示不出來)
Alpha濾鏡
Blur濾鏡
Chroma濾鏡
Dropshadow濾鏡
FlipH、FlipV濾鏡
Glow濾鏡
Gray濾鏡
Invert濾鏡
Light濾鏡
Mask濾鏡
Shawdow濾鏡
Wave濾鏡
X-ray濾鏡
Alpha濾鏡
語法:Alpha(Opacity=?,
FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?,
FinishY=?)
參數和功能: 使對象產生透明度。
參數名稱
|
功能
|
參數
|
Opacity |
圖片的不透明度 |
值從0-100,0為完全透明,100為完全不透明 |
FinishOpacity |
設置漸變的透明效果時,用來指定結束時的透明度 |
值從0-100,0為完全透明,100為完全不透明 |
Style |
指定漸變的顯示形狀 |
0:沒有漸進;1:直線漸進;2:圓形漸進;3:矩形漸進 |
StartX |
漸變透明效果開始的X坐標值 |
|
StartY |
漸變透明效果開始的Y坐標值 |
|
FinishX |
漸變透明效果結束的X坐標值 |
FinishY |
漸變透明效果結束的Y坐標值 |
Blur濾鏡
語法:Blur(Add=?, Direction=?,
Strength=?)
參數和功能: 使對象產生模糊效果。
參數名稱
|
功能
|
參數
|
Add |
指定圖片是否顯示原來的模糊方向 |
0:不顯示原對象;1:顯示原對象 |
Direction |
設置模糊的方向 |
0(上),45(右上),90(右),135(右下),180(下),225(左下),270(左),315(左上)
|
Strength |
指定模糊圖像模糊的半徑大小 |
以pixels為單位,默認為5 |
Chroma濾鏡
語法:Chroma(Color=?)
參數和功能:
某個顏色變透明。這個功能對圖片的支持不是很好。
參數名稱
|
功能
|
參數
|
color
|
把圖片或文字中的某個顏色變為透明 |
RGB格式的顏色值 |
Dropshadow濾鏡
語法:DropShadow(Color=?, OffX=?, OffY=?,
Positive=?)
參數和功能: 陰影效果。這個功能對圖片的支持不是很好,普遍用于文字。
參數名稱
|
功能
|
參數
|
Color |
指定陰影的顏色 |
RGB格式的顏色值 |
OffX |
指定陰影相對于對象在水平方向的偏移 |
整數。正數表示陰影在對象右方,負數表示在左方。 |
OffY |
指定陰影相對于對象在水垂直方向的偏移 |
整數。正數表示陰影在對象上方,負數表示在下方。 |
Positive |
指定陰影的透明度 |
0:透明,無陰影;非0:陰影的強度 |
示范:
文字效果
|
DropShadow(Color=#a0a0a0, OffX=5, OffY=5,
Positive=1)
|
FlipH、FlipV濾鏡
無任何參數。FlipH使對象產生水平翻轉效果;FlipV使對象產生垂直翻轉效果。
Glow濾鏡
語法:Glow(Color=?, Strength=?)
參數和功能:
使對象的外輪廓產生一種光暈效果。一般用于文字效果。
參數名稱
|
功能
|
參數
|
Color |
指定光暈的顏色 |
RGB格式的顏色值 |
Strength |
指定光暈的范圍 |
設定值從1-255,數字越大光暈越強 |
示范:
文字效果
|
Glow(Color=ff0000, Strength=2)
|
Gray濾鏡
無任何參數。使圖片由彩色變為灰白色調。
Invert濾鏡
無任何參數。使圖片產生照片底片的效果。
Light濾鏡
語法:Light(?)
參數和功能:模擬光源的投射效果。
不過要通過調用方法來實現,這就需要用到javascript動態濾鏡編程。在這里就不細說了。
方法
|
功能
|
AddAmbient |
加入包圍的光源 |
AddCone |
加入錐形光源 |
Addpoint |
加入點光源 |
Changcolor |
改變光的顏色 |
Changstrength |
改變光源的強度 |
Clear |
清除所有的光源 |
MoveLight |
移動光源 |
Mask濾鏡
語法:Mask(Color=?)
參數和功能:在對象上建立一個覆蓋于表面的膜。對圖像的支持不好,普遍用于文字。
示范:
Shawdow濾鏡
語法:Shadow(Color=?,
Direction=?)
參數和功能:與dropshadow非常相似,也是一種陰影效果。dropshadow沒有漸進感,shadow有漸進的陰影感。
參數名稱
|
功能
|
參數
|
Color |
指定陰影的顏色 |
RGB格式的顏色值 |
Direction |
指定陰影的方向 |
0:垂直向上;每45度為一個單位 |
示范:
|
Shadow(Color=#0099ff,
Direction=90)
|
Wave濾鏡
語法:Wave(Add=?, Freq=?, LightStrength=?,
Phase=?, Strength=?)
參數和功能:使對象在垂直方向上產生波浪的變形效果。
參數名稱
|
功能
|
參數
|
Add |
表示是否顯示原對象 |
0:不顯示;1:顯示 |
Freq |
設置波動的數量 |
自然數 |
LightStrength |
設置波浪效果的光照強度 |
0-100,1為最弱,100為最強 |
Phase |
波浪的起始相位 |
0-100 |
Strength |
設置波浪搖擺的幅度 |
自然數 |
X-ray濾鏡
無任何參數。使圖片只顯示其輪廓。