DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS的filter常用濾鏡屬性及語句大全
CSS的filter常用濾鏡屬性及語句大全
編輯:CSS詳解     
語法:STYLE="filter:filtername(fparameter1, fparameter2...)" 
(Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數) 
濾鏡說明: 
Alpha:設置透明層次 
blur:創建高速度移動效果,即模糊效果 
Chroma:制作專用顏色透明 
DropShadow:創建對象的固定影子 
FlipH:創建水平鏡像圖片 
FlipV:創建垂直鏡像圖片 
glow:加光輝在附近對象的邊外 
gray:把圖片灰度化 
invert:反色 
light:創建光源在對象上 
mask:創建透明掩膜在對象上 
shadow:創建偏移固定影子 
wave:波紋效果 
Xray:使對象變得像被x光照射一樣 
1、濾鏡:Alpha 
語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
說明: 
Opacity:起始值,取值為0~100, 0為透明,100為原圖。 
FinishOpacity:目標值。 
Style:1或2或3 
StartX:任意值 
StartY:任意值 
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 
2、濾鏡:blur 
語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 
說明: 
Add:一般為1,或0。 
Direction:角度,0~315度,步長為45度。 
Strength:效果增長的數值,一般5即可。 
例子:filter:Blur(Add="1",Direction="45",Strength="5") 
3、濾鏡:Chroma 
語法:STYLE="filter:Chroma(Color = color)" 
說明:color:#rrggbb格式,任意。 
例子:filter:Chroma(Color="#FFFFFF") 
4、濾鏡:DropShadow 
語法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 
說明:Color:#rrggbb格式,任意。 
Offx:X軸偏離值。 
Offy:Y軸偏離值。 
Positive:1或0。 
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1") 
5、濾鏡:FlipH 
語法:STYLE="filter:FlipH" 
例子:filter:FlipH 
6、濾鏡:FlipV 
語法:STYLE="filter:FlipV" 
例子:filter:FlipV 
7、濾鏡:glow 
語法:STYLE="filter:Glow(Color=color, Strength=strength)" 
說明: 
Color:發光顏色。 
Strength:強度(0-100) 
例子:filter:Glow(Color="#6699CC",Strength="5") 
8、濾鏡:gray 
語法:STYLE="filter:Gray" 
例子:filter:Gray 
9、濾鏡:invert 
語法:STYLE="filter:Invert" 
例子:filter:Invert 
10、濾鏡:mask 
語法:STYLE="filter:Mask(Color=color)" 
例子:filter:Mask (Color="#FFFFE0") 
11、濾鏡:shadow 
語法:filter:Shadow(Color=color, Direction=direction) 
說明: 
Color:#rrggbb格式。 
Direction:角度,0-315度,步長為45度。 
例子:filter:Shadow (Color="#6699CC", Direction="135") 
12、濾鏡:wave 
語法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength) 
說明: 
Add:一般為1,或0。 
Freq:變形值。 
LightStrength:變形百分比。 
Phase:角度變形百分比。 
Strength:變形強度。 
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2") 
13、濾鏡:Xray 
語法:STYLE="filter:Xray" 
例子:filter:Xray 
14.顏色變化 
語法: 
filter: progid:DXImageTransform.Microsoft.Gradient(GradIEntType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved