CSS濾鏡簡要
CSS濾鏡屬性表:
濾鏡效果 | 描述 |
Alpha | 設(shè)置透明度 |
Blru | 建立模糊效果 |
Chroma | 把指定的顏色設(shè)置為透明 |
DropShadow | 建立一種偏移的影象輪廓,即投射陰影 |
FlipH | 水平反轉(zhuǎn) |
FlipV | 垂直反轉(zhuǎn) |
Glow | 為對象的外邊界增加光效 |
Grayscale | 降低圖片的彩色度 |
Invert | 將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果 |
Light | 在一個(gè)對象上進(jìn)行燈光投影 |
Mask | 為一個(gè)對象建立透明膜 |
Shadow | 建立一個(gè)對象的固體輪廓,即陰影效果 |
Wave | 在X軸和Y軸方向利用正弦波紋打亂圖片 |
Xray | 只顯示對象的輪廓 |
1、Alpha 濾鏡
語法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
2、Blur 濾鏡
語法:對于HTML:{filter:blur(add=add,direction=direction,strength=strength)}
對于Script語言: [oblurfilter=] object.filters.blur
模糊效果
3、FlipH, FlipV 濾鏡
語法:{filter:filph} ,{filter:filpv} 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn)
4、Chroma 濾鏡
語法:{filter:chroma(color=color)}
使用”Chroma"屬性可以設(shè)置一個(gè)對象中指定的顏色為透明色,參數(shù)COLOR即要透明的顏色。下面是蘭色文字,然后用Chroma 濾鏡過濾掉蘭色,就成了下面的樣子。
5、DropShadow 濾鏡
語法:{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
“DropShaow"顧名思義就是添加對象的陰影效果。
6、Glow 濾鏡
語法:{filter:glow(color=color,strength)}
當(dāng)對一個(gè)對象使用"glow"屬性后,這個(gè)對象的邊緣就會產(chǎn)生類似發(fā)光的效果。“COLOR”是指定發(fā)光的顏色,“STRENGTH”則是強(qiáng)度的表現(xiàn),可以從1到255之間的任何整數(shù)來指定這個(gè)力度。如filter:glow(color=red,strength=10)
7、Gray ,Invert,Xray 濾鏡
語法:{filter:gray} ,{filter:invert},{filter:xray}
Gray濾鏡是把一張圖片變成灰度圖;Invert濾鏡是把對象的可視化屬性全部翻轉(zhuǎn),包括色彩、飽和度、和亮度值;Xray濾鏡是讓對象反映出它的輪廓并把這些輪廓加亮,也就是所謂的“X”光片。
8、Light 濾鏡
語法:Filter{light}
這個(gè)屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那么就可以調(diào)用它的“方法(Method)"來設(shè)置或者改變屬性。
9、Mask 濾鏡
語法:{filter:mask(color=color)}
使用"MASK"屬性可以為對象建立一個(gè)覆蓋于表面的膜,其效果就象戴者有色眼鏡看物體一樣。
10、Shadow 濾鏡
語法:{filter:shadow(color=color,direction=direction)}
11、Wave 濾鏡:
語法:{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 屬性把對象按垂直的波形樣式打亂。默認(rèn)是“TRUE(非0)”,
“ADD”表示是否要把對象按照波形樣式打亂,
“FREQ”是波紋的頻率,也就是指定在對象上一共需要產(chǎn)生多少個(gè)完整的波紋,
“LIGHTSTRENGTH”參數(shù)可以對于波紋增強(qiáng)光影的效果,范圍0----100,
“PHASE”參數(shù)用來設(shè)置正弦波的偏移量。
“STRENGTH”代表振幅大小。
posted on 2008-12-15 11:48 小卓 閱讀(268) 評論(0) 編輯 收藏 所屬分類: html and js