[CSS]濾鏡用法(1)

濾鏡效果	功能描述
Alpha	設定不同的透明度變化效果
Blur	建立模糊效果
DropShadow	建立一種位移的影象輪廓，即投射陰影
FlipH	水平翻轉
FlipV	垂直翻轉
Glow	為對象的邊界增加色彩光效
Gray	將圖片以灰階形式顯示
Invert	將色彩、飽和度以及亮度值完全反轉,類似底片效果
Light	在一個對象上進行燈光投影
Mask	為一個對象建立彩色透明遮罩
Shadow	為對象建立輪廓的影效果
Wave	在X軸和Y軸方向利用正弦波打亂圖片
Xray	只顯示對象的輪廓

Alpha 濾鏡

　　"Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標，可以指定各種不同範圍的透明度。

Alpha 濾鏡文法

{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity, style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)}

　　參數含義分別如下：

參數	說明
opacity	透明度。預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity	是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style	指定透明地區的形狀特徵： 0 代表統一形狀 1 代表線形 2 代表放射狀 3 代表矩形
startx	漸層透明效果開始處的 X座標。
starty	漸層透明效果開始處的 Y座標。
finishx	漸層透明效果結束處的 X座標。
finishy	漸層透明效果結束處的 Y座標。

Blur 濾鏡　　用手指在一幅尚未乾透的畫面迅速划過時，畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。

Blur濾鏡文法

HTML：{filter:blur(add=add,direction=direction, strength=strength)} Script語言： [oblurfilter=] object.filters.blur

　　參數含義分別如下：

參數	說明
add	它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的， 這是一個布爾值:ture （預設）或false
direction	該參數用來設定模糊的方向。 0度代表垂直向上，每45度為一個單位，預設值是向左的270度
strength	只能使用整數來指定，代表有多少像素的寬度將受到模糊影響，預設是5個像素。

　　字型設定效果：

CSS濾鏡實現	歡迎來到天極設計線上！
效果拷屏
代碼	＜td style=filter:blur(add=ture,direction=135,strength=10)＞ ＜b＞＜font size="+3"＞歡迎來到天極設計線上！＜/font＞＜/b＞＜/td＞

DropShadow 濾鏡

　　“DropShaow"，顧名思義就是添加對象的陰影製作效果。其工作原理是建立一個位移量，加上色彩。

DropShadow 濾鏡文法

{filter:dropshadow (color=color,offx=ofx,offy=offy,positive=positive)}

　　參數含義如下：

參數	說明
Color	代表投射陰影的顏色
offx	X方向陰影的位移量
offy	Y方向陰影的位移量
Positive	布爾值 如果為TRUE（非0），就為任何的非透明像素建立可見的投影 如果為FASLE（0），就為透明的像素部分建立透明效果

FlipH, FlipV 濾鏡

　　FlipH 濾鏡實現水平反轉

FlipH 濾鏡文法

{filter:filph}

　　FlipV 濾鏡實現垂直反轉

FlipV 濾鏡文法

{filter:filpv}

FlipH, FlipV 濾鏡

　　FlipH 濾鏡實現水平反轉

FlipH 濾鏡文法

{filter:filph}

　　FlipV 濾鏡實現垂直反轉

FlipV 濾鏡文法

{filter:filpv}

Glow 濾鏡

　　對一個對象使用"glow"屬性後，這個對象的邊緣就會產生類似發光的效果。

Glow 濾鏡文法

{filter:glow(color=color,strength)}

Gray ,Invert,Xray 濾鏡

　　使用Gray濾鏡可以把一張圖片變成灰階圖，文法很簡單：

Gray 濾鏡文法

{filter:gray}

Gray ,Invert,Xray 濾鏡

　　使用Gray濾鏡可以把一張圖片變成灰階圖，文法很簡單：

Gray 濾鏡文法

{filter:gray}

Mask 濾鏡

Mask 濾鏡文法

{filter:mask(color=color)}

　　使用"MASK"屬性可以為對象建立一個覆蓋於表面的膜，其效果就象戴著有色眼鏡看物體一樣 。

原表格拷屏

CSS 濾鏡效果實現

歡迎光臨天極設計線上

效果拷屏

Light 濾鏡

Light 濾鏡文法

{filter:light}

　　這個屬性類比光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那麼就可以調用它的“方法(Method)"來設定或者改變屬性。“LIGHT"可用的方法有：

參數	說明
AddAmbient	加入包圍的光源
AddCone	加入錐形光源
AddPoint	加入點光源
Changcolor	改變光的顏色
Changstrength	改變光源的強度
Clear	清除所有的光源
MoveLight	移動光源

　　我們可以定義光源的虛擬位置，以及通過調整X軸和Y軸的數值來控制光源焦點的位置，還可以調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態設定光源，可能會產生一些意想不到的效果。

Shadow 濾鏡

Shadow 濾鏡 文法

{filter:shadow(color=color,direction=direction)}

　　利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設定投影的方向。其中0度代表垂直向上，然後每45度為一個單位。它的預設值是向左的270度。

　　效果如下：

CSS濾鏡實現	代碼	效果拷屏
歡迎光臨	＜td style=filter:shadow (color=red, direction=45＞ ＜b＞歡迎光臨＜/b＞＜/td＞
天極	＜td style=filter:shadow (color=blue,direction=180＞ ＜b＞天極＜/b＞＜/td＞
設計線上	＜td style=filter:shadow (color=gray, direction=225＞ ＜b＞設計線上＜/b＞＜/td＞

Wave 濾鏡

Wave 濾鏡 文法

{filter:wave(add=add,freq=freq, lightstrength=strength, phase=phase,strength=strength)}

參數	說明
wave	把對象按垂直的波形樣式打亂。 預設是 TRUE（非0）
ADD	是否要把對象按照波形樣式打亂
FREQ	波紋的頻率，也就是指定在對象上一共需要產生多少個完整的波紋
LIGHTSTRENGTH	可以對于波紋增強光影的效果，範圍0----100
PHASE	設定正弦波的位移量
STRENGTH	振幅大小

Gray ,Invert,Xray 濾鏡

　　使用Gray濾鏡可以把一張圖片變成灰階圖，文法很簡單：

Gray 濾鏡文法

{filter:gray}