CSS的filter常用濾波器屬性及語句大全

來源:互聯網
上載者:User

文法: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');

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.