語(yǔ)法STYLE=＂filterfiltername(fparameter1, fparamete……

1、語(yǔ)法：STYLE="filter:filtername(fparameter1, fparameter2.)"（Filtername為濾鏡的名稱(chēng)，fparameter1、fparameter2等是濾鏡的參數(shù)） 濾鏡說(shuō)明： alpha：設(shè)置透明層次blur：創(chuàng)建高速度移動(dòng)效果，即模糊效果chroma：制作專(zhuān)用顏色透明DropShadow：創(chuàng)建對(duì)象的固定影子FlipH：創(chuàng)建水平鏡像圖片F(xiàn)lipV：創(chuàng)建垂直鏡像圖片glow：加光輝在附近對(duì)象的邊外gray：把圖片灰度化invert：反色light：創(chuàng)建光源在對(duì)象上mask：創(chuàng)建透明掩膜在對(duì)象上shadow：創(chuàng)建偏移固定影子wave

2、：波紋效果Xray：使對(duì)象變得像被x光照射一樣1、濾鏡：Alpha語(yǔ)法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)" 說(shuō)明：Opacity：起始值，取值為0100, 0為透明，100為原圖。FinishOpacity：目標(biāo)值。Style：1或2或3StartX：任意值StartY：任意值例子：filter:Alpha(Opacity="

3、;0",FinishOpacity="75",Style="2") "Alpha"屬性是把一個(gè)目標(biāo)元素與背景混合。設(shè)計(jì)者可以指定數(shù)值來(lái)控制混合的程度。這種“與背景混合”通俗地說(shuō)就是一個(gè)元素的透明度。通過(guò)指定坐標(biāo)，可以指定各種不同范圍的透明度。Alpha 濾鏡語(yǔ)法FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)參數(shù)含義分

4、別如下：參數(shù) 說(shuō)明opacity透明度。默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說(shuō)，0代表完全透明，100代表完全不透明。finishopacity是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來(lái)指定結(jié)束時(shí)的透明度。范圍也是0 到 100。style指定透明區(qū)域的形狀特征：0 代表統(tǒng)一形狀1 代表線形2 代表放射狀3 代表矩形startx漸變透明效果開(kāi)始處的 X坐標(biāo)。starty漸變透明效果開(kāi)始處的 Y坐標(biāo)。finishx漸變透明效果結(jié)束處的 X坐標(biāo)。finishy漸變透明效果結(jié)束處的 Y坐標(biāo)。具體效果應(yīng)用如下： CSS濾鏡實(shí)現(xiàn)代碼效果拷屏正常圖片img src

5、="pic1.jpg"width="180" height="120"透明度為60img src="pic1.jpg"style="filter:alpha(opacity=60)"width="180" height="120"區(qū)域透明度設(shè)置，從(0,5)到(90,60)img src="pic1.jpg" style="filter:alpha(opacity=0, finishopacity=100,style=1,st

6、artx=0,starty=5,finishx=90,finishy=60"width="180" height="120" 2、濾鏡：blur語(yǔ)法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"說(shuō)明：Add：一般為1，或0。Direction：角度，0315度，步長(zhǎng)為45度。Strength：效果增長(zhǎng)的數(shù)值，一般5即可。例子：filter:Blur(Add="1",Direction="45&

7、quot;,Strength="5")3、濾鏡：Chroma語(yǔ)法：STYLE="filter:Chroma(Color = color)"說(shuō)明：color：#rrggbb格式，任意。例子：filter:Chroma(Color="#FFFFFF")4、濾鏡：DropShadow語(yǔ)法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"說(shuō)明：Color:#rrggbb格式，任意。Offx：X軸偏離值。Offy：Y

8、軸偏離值。Positive：1或0。例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")DropShadow 濾鏡 “DropShaow"，顧名思義就是添加對(duì)象的陰影效果。其工作原理是建立一個(gè)偏移量，加上色彩。 DropShadow 濾鏡語(yǔ)法filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)參數(shù)含義如下：參數(shù) 說(shuō)明Color代表投射陰影的顏

9、色offxX方向陰影的偏移量offyY方向陰影的偏移量Positive布爾值如果為T(mén)RUE（非0），就為任何的非透明像素建立可見(jiàn)的投影如果為FASLE（0），就為透明的像素部分建立透明效果效果實(shí)現(xiàn)：CSS濾鏡實(shí)現(xiàn)代碼效果拷屏正常圖片 圖片效果（這里我們把濾鏡代碼寫(xiě)在td里）td style=filter:dropshadow(color=gray,offx=5,offy=5.positive=0)img src="pic1.jpg"width="180" height="120"/td 歡迎光臨天極設(shè)計(jì)在線文字效果td style=f

10、ilter:dropshadow(color=gray,offx=2,offy=2.positive=0)bfont size="+1"歡迎光臨天極設(shè)計(jì)在線/font/b/td5、濾鏡：FlipH語(yǔ)法：STYLE="filter:FlipH" 例子：filter:FlipH 6、濾鏡：FlipV語(yǔ)法：STYLE="filter:FlipV"例子：filter:FlipV FlipH, FlipV 濾鏡FlipH 濾鏡實(shí)現(xiàn)水平反轉(zhuǎn) FlipH 濾鏡語(yǔ)法filter:filphFlipV 濾鏡實(shí)現(xiàn)垂直反轉(zhuǎn) FlipV 濾鏡語(yǔ)法filter

11、:filpv圖片實(shí)現(xiàn)效果如下：CSS濾鏡實(shí)現(xiàn)代碼效果拷屏正常圖片img src="pic1.jpg"width="180" height="120"垂直翻轉(zhuǎn)img src="pic1.jpg" style="filter:flipv;" width="180" height="120"水平翻轉(zhuǎn)img src="pic1.jpg" style="filter:fliph;" width="180"

12、height="120"先水平反轉(zhuǎn)，然后垂直反轉(zhuǎn)img src="pic1.jpg"style="filter:fliph() flipv()"width="180" height="120"7、濾鏡：glow語(yǔ)法：STYLE="filter:Glow(Color=color, Strength=strength)"說(shuō)明：Color：發(fā)光顏色。Strength：強(qiáng)度(0100)例子：filter:Glow(Color="#6699CC",Strength=

13、"5")Glow 濾鏡對(duì)一個(gè)對(duì)象使用"glow"屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類(lèi)似發(fā)光的效果。Glow 濾鏡語(yǔ)法filter:glow(color=color,strength)參數(shù)含義如下：參數(shù) 說(shuō)明Color指定發(fā)光的顏色STRENGTH強(qiáng)度，值為1到255之間的任何整數(shù)，指定發(fā)光色力度和范圍。實(shí)例： CSS濾鏡實(shí)現(xiàn)代碼效果拷屏歡迎光臨天極設(shè)計(jì)在線 td style="filter:glow(color=#ff0000,strength=2)" font size="+1"b歡迎光臨天極設(shè)計(jì)在線/b/font/

14、td這樣的效果可以做標(biāo)題 td style=filter:glow(color=#ffff00,strength=5)bfont size="+1"這樣的效果可以做標(biāo)題/b/font/td8、濾鏡：gray語(yǔ)法：STYLE="filter:Gray"例子：filter:Gray9、濾鏡：invert語(yǔ)法：STYLE="filter:Invert"例子：filter:Invert10、Light 濾鏡Light 濾鏡語(yǔ)法filter:light這個(gè)屬性模擬光源的投射效果。一旦為對(duì)象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它

15、的“方法(Method)"來(lái)設(shè)置或者改變屬性?！癓IGHT"可用的方法有：參數(shù) 說(shuō)明AddAmbient 加入包圍的光源AddCone加入錐形光源AddPoint加入點(diǎn)光源Changcolor 改變光的顏色Changstrength改變光源的強(qiáng)度Clear清除所有的光源MoveLight移動(dòng)光源我們可以定義光源的虛擬位置，以及通過(guò)調(diào)整X軸和Y軸的數(shù)值來(lái)控制光源焦點(diǎn)的位置，還可以調(diào)整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動(dòng)態(tài)的設(shè)置光源，可能會(huì)產(chǎn)生一些意想不到的效果。10、濾鏡：mask語(yǔ)法：STYLE="filter:Ma

16、sk(Color=color)"例子：filter:Mask (Color="#FFFFE0")Mask 濾鏡Mask 濾鏡語(yǔ)法filter:mask(color=color)使用"MASK"屬性可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴著有色眼鏡看物體一樣 。原表格拷屏 CSS 濾鏡效果實(shí)現(xiàn)歡迎光臨天極設(shè)計(jì)在線效果拷屏11、濾鏡：shadow語(yǔ)法：filter:Shadow(Color=color, Direction=direction)說(shuō)明：Color：#rrggbb格式。Direction：角度，0315度，步長(zhǎng)為45度。例子：fi

17、lter:Shadow (Color="#6699CC", Direction="135")12、濾鏡：wave語(yǔ)法：filter: Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase，Strength=strength)說(shuō)明：Add：一般為1，或0。Freq：變形值。LightStrength：變形百分比。Phase：角度變形百分比。Strength：變形強(qiáng)度。例子：filter: wave(Add="0", Phase="4", Freq=&quo

18、t;5", LightStrength="5", Strength="2")CSS濾鏡實(shí)現(xiàn)代碼效果拷屏img src="pic1.jpg" width="180" height="120" alt="正常圖片"img src="pic1.jpg" style="filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)"width="180&quo

19、t; height="120"img src="pic1.jpg" style="filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)"width="180" height="120"13、濾鏡：Xray語(yǔ)法：STYLE="filter:Xray" 例子：filter:XrayGray ,Invert,Xray 濾鏡使用Gray濾鏡可以把一張圖片變成灰度圖，語(yǔ)法很簡(jiǎn)單：Gray 濾鏡語(yǔ)法filter:

20、gray實(shí)例：正常圖片濾鏡代碼實(shí)現(xiàn)效果拷屏img src="pic1.jpg" style="filter:gray" width="180" height="120"使用Invert濾鏡可以把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值Invert 濾鏡語(yǔ)法filter:invert正常圖片濾鏡代碼實(shí)現(xiàn)效果拷屏img src="pic1.jpg" style="filter:invert" width="180" height="120

21、"使用Xray濾鏡可以讓對(duì)象反映出它的輪廓并把這些輪廓加亮，類(lèi)似于所謂的“X”光片。Xray 濾鏡語(yǔ)法filter:xray效果如下：正常圖片濾鏡代碼實(shí)現(xiàn)效果拷屏img src="pic1.jpg" style="filter:xray" width="180" height="120"12、Wave屬性 Wave屬性用來(lái)把對(duì)象按照垂直的波紋樣式打亂。它的表達(dá)式如下： Filter：Wave（Add=True（False），F(xiàn)req=頻率，LightStrength=增強(qiáng)光效，Phase=偏移量，Stre

22、ngth=強(qiáng)度） 我們看到Wave屬性的表達(dá)式還是比較復(fù)雜的，它一共有五個(gè)參數(shù)。Add參數(shù)有兩個(gè)參數(shù)值：True代表把對(duì)象按照波紋樣式打亂；False代表不打亂；Freq參數(shù)指生成波紋的頻率，也就是指定在對(duì)象上共需要產(chǎn)生多少個(gè)完整的波紋。 LightStrength參數(shù)是為了使生成的波紋增強(qiáng)光的效果。參數(shù)值可以從0到100。 Phase參數(shù)用來(lái)設(shè)置正弦波開(kāi)始的偏移量。這個(gè)值的通用值為0，它的可變范圍為從0到100。這個(gè)值代表開(kāi)始時(shí)的偏移量占波長(zhǎng)的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開(kāi)始。 說(shuō)了一大堆，我們還是先看一個(gè)實(shí)例吧。比如下面這幅圖片（點(diǎn)擊可放大）：下面我們對(duì)上面這個(gè)頁(yè)面加上Wave效果，代碼如下：<html><head> <title> wave css</title> <style>/*定義CSS 樣式開(kāi)始*/<!- .leafposition:absolute；top:10；width:300； filter:wave(add=true,freq=3,lightstr