CSS濾鏡及漸變 (filter樣式表屬性)

濾鏡效果 描述 　　 ----------------------------------------------------- Alpha 設置了透明度 　　 Blur 創建了模糊的效果 　　 Chroma 把指定的顏色設置爲透明 　　 Dropshadow 創建一種偏移的影象輪廓,既投射陰影 　　 Filph 水平翻轉 　　 Filpv 垂直翻轉 　　 Glow 爲對象的外邊界增長光效 　　 Grayscale 下降圖片的彩度 　　 Invert 將色彩,飽和度以及亮度值徹底翻轉創建底片效果 　　 Light 再一個對象上面進行燈光投影 　　 Mask 爲一個對象創建透明膜 　　 Shadow 創建一個對象的固體輪廓,即陰影效果 　　 Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 　　 Xray 只顯示對象的輪廓 　　 ------------------------------------------------------- 　　 1.Alpha屬性 語法:filter :alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX 　　 startY=startY,finishX=finishX,finishY=finishY) 　　 功能:它把一個目標元素與背景相混合,即設置圖片透明度 　　 參數: opacity :表明透明水準,默認範圍 0---100 0徹底透明 finishopacity :可選,若是想要設置漸變的透明效果,就可使用它來指定結束時的透明度0-100 　　 style: 指定了透明區域的形狀特徵 　　 0---表明統一形狀 　　 1---表明線形 　　 2---放射形 　　 3---表明長方形 　　 startx ,starty :表明漸變透明效果開始的X和Y座標值 　　 finishX,finishY:表明漸變透明效果結束的X和Y座標值 2.Blur屬性 　　 語法: filter: blur(add=add,direction=direction,strength=strength) 　　 功能: 它用於產生模糊效果 　　 參數: add : true/fale ,它指定圖片是否被改變成印象派的模糊效果.模糊效果是按順時針方向進行的. 　　 direction : 用來設置模糊的方向. 0表明垂直方向.而後每45度一個單位,默認值是向左的270度. 　　 0--向上 45--右上 90--右 依次類推 　　 3.Chroma屬性 　　 語法: filter chroma(color=color) 功能：用來設置一個對象中指定的顏色爲透明色.color即爲要設爲透明色的顏色. 　　 參數: #RRGGBB /#ffff00 兩種顏色格式 　　 4.Dropshadow屬性 　　 語法: filter dropshadow(color=color,offx=offx,offY=offY,positive=positive) 　　 功能: 用於爲對象添加陰影效果. 　　 參數: color :表明投影的顏色 　　 offx,offy:表明X方向和Y方向陰影的偏移量。必用整數來指定。 　　 positive : 1 true 表明爲任何的非透明像素創建可見的陰影 　　 0 false 表明爲透明的像素部分創建可見的投影 　　 5.FlipH屬性 　　 語法：filter: fliph() 功能：它是一個水平翻轉對象的濾鏡屬性。它爲當前的對象產生一個濾鏡。以此來創建翻轉效果。 　　 6.FlipV屬性 　　 語法：filter: flipv() 　　 功能：它是一個垂直翻轉對象的濾鏡屬性。它爲當前的對象產生一個濾鏡。以此來創建翻轉效果。 　　 7.Glow屬性 　　 語法：filter: glow(color=color,strength=strength) 功能：用於使對象的邊緣產生相似發光的效果。經過定義數值能夠指定這種效果的顏色和力度等級。 　　 參數：color :指定發光的顏色。 strength: 用於指定表現強度。 1---255之間的任何整數。 　　 8.Gray屬性 　　 語法：filter: gray() 　　 功能：把一副圖片轉換爲黑白圖。 　　 參數：彩色的圖片可能含有24位色。也可能含有16位色。當使用此屬性時，就能夠下降圖片的顏色信息。 　　 9.Invert屬性 　　 語法：filter: invert() 功能：能夠把對象的可視化屬性所有翻轉。其中包括色彩，飽和度和亮度值。就是平時所說的‘底片’或是‘頁片’效果 　　 10.Mask屬性 語法：filter: mask(color=color) 　　 功能：能夠爲對象創建一個覆蓋的膜。就象帶着有色眼鏡看物體同樣 11.Shadow屬性 　　 語法：filter: shadow(color=color,direction=direction) 功能：能夠在指定的方向創建物體的投影 　　 參數：color :投影的顏色 　　 direction :設置按照順時針方向的投影方向。0表明垂直方向。 每45度爲一個單位。默認爲向左270度 　　 Shadow與Dropshadow區別： Shadow :依靠指定角度值能夠任意投射陰影。這些陰影是對象原先部分的延伸。 Dropshadow:是依靠X方向和Y方向的偏移量來定義投影的。這些陰影實際上是對象的移動。 　　 12.Wave屬性 　　 語法：filter: wave(add=add,freq=freq,lightstrength=lighstrength,phase=phase,stength=strength) 　　 功能：把對象按照垂直的波形樣式打亂。 　　 參數：add: 表示是否要把對象按照波形樣式打亂。默認true 　　 freq: 是波紋的頻率，也就是指定在這個對象上面一共須要產生多少完整的波紋 　　 lightstrength: 能夠對波紋加強光影的效果。0--100之間的整數值 　　 phase :用來設置正弦開始的偏移量。通用值爲0，0---100之間。這個數值表明開始的偏移量取自波長的百分比 例如：phase的值爲25，那麼正弦波就從90度方向開始 　　 13.Xray屬性 　　語法：filter: xray() 　　功能：可讓對象反映出它的輪廓，並把這些輪廓增亮。 　　參數：所謂的X光效果都是黑白的灰度圖，所以儘管代碼中原先定義了其餘色。可是通過X光處理後都變成了黑白的反色