濾鏡效果	功能描述
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	指定透明區(qū)域的形狀特征： 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"屬性后，這個對象的邊緣就會產生類似發(fā)光的效果。

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軸的數值來控制光源焦點的位置，還可以調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態(tài)的設置光源，可能會產生一些意想不到的效果。

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}

總結

以上是生活随笔為你收集整理的[CSS]滤镜用法(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。