css濾鏡效果（一）_基礎教程

1、Alpha 濾鏡

文法：

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

"Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標，可以指定點、線、面的透明度。他們的參數含義分別如下：
“opacity"代表透明度水準。預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。”finishopacity"是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。“style" 參數指定了透明地區的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。”STARTX“和”STARTY“代表漸層透明效果的開始X和Y座標。”FINISHX“和”FINISHY“代表漸層透明效果結束X和Y 的座標。

效果如下：

　

2、Blur 濾鏡

文法：對於HTML：

{ilter:blur(add=add,direction=direction,strength=strength)}

對於Script語言：

[oblurfilter=] object.filters.blur

用手指在一幅尚未乾透的油畫上迅速划過時，畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。
“ADD”參數是一個布爾判斷“TRUE（預設）”或者“FALSE”。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的，“DIRECTION”參數用來設定模糊的方向。其中0度代表垂直向上，然後每45度為一個單位。它的預設值是向左的270度。“STRENGTH“值只能使用整數來指定，她代表有多少像素的寬度將受到模糊影響。預設是5個。對於網頁上的字型，如果設定他的模糊”ADD=1“，那麼這些字型的效果會非常好看的。如下：

filter:blur(add=ture,direction=135,strength=10）

我向你飛，雨溫柔地綴！

3、FlipH, FlipV 濾鏡

文法：{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉，具體如下：

4、Chroma 濾鏡

文法：

{filter:chroma(color=color)}

使用”Chroma"屬性可以設定一個對象中指定的顏色為透明色，參數COLOR即要透明的顏色。下面是蘭色文字，然後用Chroma 濾鏡過濾掉蘭色，就成了下面的樣子。

filter:chroma(color=blue)

滴水簷坊

　

5、DropShadow 濾鏡

文法：

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

“DropShaow"顧名思義就是添加對象的陰影製作效果。其工作原理是建立一個位移量，加上較深。"Color"代表投射陰影的顏色，"offx"和"offy"分別是X方向和Y方向陰影的餓位移量。"Positive"參數是一個布爾值，如果為“TRUE（非0）”，那麼就為任何的非透明像素建立可見的投影。如果為“FASLE（0）”，那麼就為透明的像素部分建立透明效果

正常文字	dropshadow(color=gray,offx=5,offy=5.positive=0)後的文字

6、Glow 濾鏡

文法：

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

當對一個對象使用"glow"屬性後，這個對象的邊緣就會產生類似發光的效果。“COLOR”是指定發光的顏色，“STRENGTH”則是強度的表現，可以從1到255之間的任何整數來指定這個力度。
filter:glow(color=red,strength=10) 後的效果

滴水簷茶坊

filter:glow(color=#ffff00,strength=5) 後的效果

滴水簷茶坊

好象可以把PhotoShop踹到一邊了，是嗎？

以上就是css濾鏡效果（一）_基礎教程的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

