CSS 濾鏡學習小結

適用瀏覽器：

IE。 不符合CSS 標準

定於文法：

filter:filtername{parameters};

分類：

基本濾鏡--可直接作用在對象上，並立即生效，主要有：

1).alpha--通道

2).blur--模糊

3)MotionBlur--移動模糊

4)Chroma--透明色

5)Drop Shadow--下落陰影

6)Flip--對稱變換

7)Glow--光暈

8)GrayScale--灰階

9)Invert--反色

10)Mask--遮罩

11)Shadow--陰影

12)X-ray--X光效果

13)Emboss or Engrave--浮雕

14)Wave--波浪

進階濾鏡--需配合JS等指令碼使用，產生更絢麗的變幻效果 ，主要有

1)BlendTrans -- 漸隱變換

2)RevealTrans--變換

3)Light --燈光

alpha

filter:alpha(opacity=opacity,finishopacity=finishopacity,startX=startX, startY=startY,finishX=finishX,finishY=finishY);

opacity: 透明度等級， 取值 0-100(0完全透明) style: 透明地區的形狀特徵，取值 0,1,2,3    0-統一形狀 1-線性 2--圓形放射漸層  3--矩形放射漸層 X,Y這種的為座標參數了

blur

filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=makeshadow,pi xelradius=pixelradius,shadowopacity=shadowopacity);

makeshadow設定對象的內容是否被處理為陰影， pixelradius設定模糊效果的作用深度。 shadowopacity設定使用makeshadow製作成的陰影 的透明度

例子：
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);

MotionBlur

filter:porgid:DXImageTransform.Microsoft.MotionBlur(add=add,direc tion=direction,strength=strength);

add:指定是否疊加原圖片。   取值 true, false direction: 設定模糊的方向。0表示垂直向上。預設向左270 strength: 有多少像素的寬度受到模糊的影響

例子：
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);        /* 水平向右 */

Chroma

filter:chroma(color:color)

color:希望透明的顏色值

例子：
filter:chroma(color=FF6800);        /* 去掉金黃色 */

Dropshadow

filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive);

color:投射陰影的顏色 offx和offy分別表示x方向和y方向陰影的位移量。 positive:   true--任何非透明像素建立可見的投影   false--透明的像素部分建立可見的投影

例子：
.drop1{
    filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}
.drop2{
    filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}

flip

filter:fliph filter:fiipv

fliph:水平翻轉 flipv:豎直翻轉

例子：
.flip2{
    filter:flipv;    /* 豎直翻轉 */
}
.flip3{
    filter:flipv fliph;    /* 水平、豎直同時翻轉 */
}

Glow

filter:Glow(color=color,strength=strength);

color: 發光的顏色 strength: 發光的強度。（1-255）

例子：
    filter:glow(color=#FFFF99,strength=6);    /* 發黃色光 */

Gray

filter:gray;

filter:gray;    /* 黑白圖片 */

Invert

filter:invert

例子：
    filter:invert;    /* 底片效果 */

Mask

filter:mask(color=color);

color:指定使用什麼顏色作為掩膜

例子：
filter:mask(color=#8888FF);    /* 遮罩效果 */

Shadow

filter:shadow(color=color,direction=direction);

color: 設定陰影的顏色 direction: 設定陰影的方向

例子：
.shadow{
    filter:shadow(color=#CCCCFF,direction=135);    /* 陰影製作效果 */
}
.drop{
    filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
    /* 下落陰影 */
}

X射線

filter:xray;

例子：
.xray{
    filter:xray;    /* X光效果 */
}
.gray{
    filter:gray;    /* 黑白效果 */
}