1、 CSS濾鏡簡介
隨着網頁設計技術的發展，人們已經不滿足於原有的一些HTML標記，而是希望能夠爲頁面添加一些多媒體屬性，例如濾鏡的和漸變的效果、CSS技術的飛快發展使這些需求成爲了現實、從現在開始我要爲大家介紹一個新的CSS擴展部分：CSS濾鏡屬性（Filter Properties)、使用這種技術可以把可視化的濾鏡和轉換效果添加到一個標準的HTML元素上，例如圖片、文本容器、以及其他一些對象、對於濾鏡和漸變效果，前者是基礎，因爲後者就是濾鏡效果的不斷變化和演示更替、當濾鏡和漸變效果結合到一個基本的SCRIPT小程序中後，網頁設計者就可以擁有一個建立動態交互文檔的強大工具、也就是CSS FILTER+ SCRIPT， 這就說明想要建立動態的文檔還要一些SCRIPT （腳本語言）的基礎、可視化濾鏡屬性只能用在HTML控件元素上、所謂的HTML空間元素就是它們在頁面上定義了一個矩形空間，瀏覽器的窗口可以顯示這些空間、下面列出了HTML合法的控件和它們的說明、
2、 濾鏡的應用
1.濾鏡的使用 和其它CSS的樣式定義方式一樣，分爲外部引用、內部引用和局部引用三種
2. Filter樣式屬性允許一次設定多個濾鏡效果，也就是說，可以讓一個HTML的元件同時擁有多個濾鏡的的效果
3. 如果使用多的濾鏡，那麼濾鏡間要以空格分開， 一個濾鏡中的若干參數以逗號分隔， Filter和其他的CSS樣式則以分號分開、
4. 部分濾鏡要有一定的width與height才能顯示出結果,如shadow,blur,alpha等、
5. 在有的濾鏡中處理圖片時，圖片必須是透明的效果圖，比如:Glow等
6. 有的濾鏡不能應用在圖片上，僅對容器有效、
7. 目前僅有IE的最高版本對濾鏡支持較全，使用時要考慮瀏覽者瀏覽器的兼容性、
3、 alpha濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Alpha ( sProperties ) "
|
| alpha濾鏡 | | 屬性 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | opacity |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 0 ，即完全透明。 100 爲完全不透明。 |
設置或檢索透明漸變的開始透明度。 | | style |
整數值(Integer)。 0 | 1 | 2 | 3
0 : 默認值。整體透明度。將 Opacity 值均勻的作用於對象。
1 : 線性漸變透明度。從由 StartX 和 StartY 決定的點，由 Opacity 決定的透明度開始，到由 FinishX 和 FinishY 決定的點，由 FinishOpacity決定的透明度結束。
2 : 圓形放射漸變透明度。圓形放射區域的圓心爲對象的中心，圓周到與對象的邊相切爲止。透明漸變由圓心開始，到圓周結束。開始透明度由 Opacity 決定，結束透明度由 FinishOpacity 決定。
3 : 矩形放射漸變透明度。由對象的邊開始，到對象的中心結束。開始透明度由 Opacity 決定，結束透明度由FinishOpacity 決定。 |
設置或檢索透明漸變的樣式 | | finishOpacity |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 0 ，即完全透明。 100 爲完全不透明 |
設置或檢索透明漸變的結束透明度 | | startX |
整數值(Integer)。其數值作爲對象寬度的百分比值處理。默認值爲 0 |
設置或檢索 Alpha 濾鏡透明漸變開始點的水平座標。僅當 style 屬性值設置爲 1 ，即漸變樣式爲線性(linear)漸變時，此屬性纔會發生作用 | | startY |
整數值(Integer)。其數值作爲對象高度的百分比值處理。默認值爲 0 |
設置或檢索 Alpha 濾鏡透明漸變開始點的垂直座標。僅當 style 屬性值設置爲 1 ，即漸變樣式爲線性(linear)漸變時，此屬性纔會發生作用 | | finishX |
整數值(Integer)。其數值作爲對象寬度的百分比值處理。默認值爲 0 |
設置或檢索 Alpha 濾鏡透明漸變結束點的水平座標。僅當 style 屬性值設置爲 1 ，即漸變樣式爲線性(linear)漸變時，此屬性纔會發生作用 | | finishY |
整數值(Integer)。其數值作爲對象高度的百分比值處理。默認值爲 0 |
設置或檢索 Alpha 濾鏡透明漸變結束點的垂直座標。僅當 style 屬性值設置爲 1 ，即漸變樣式爲線性(linear)漸變時，此屬性纔會發生作用 |
|
4、 blur濾鏡
語法：
CSS：filter:blur(add=add,direction=direction,strength=strength)
Scripting： [oblurfilter=] object.filters.blur |
|
|
| blur濾鏡 | | 屬性 |
取值範圍 |
說明 | | add |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | direction |
0（上），45（右上）
90（右），135（右下）
180（下），225（左下）
270（左），315（左上） |
Direction參數用來設置模糊的方向。模糊效果是按照順時針方向進行的。其中0度代表垂直向上，每45度一個單位，默認值是向左的270度。 | | strength |
自然數 |
設置模糊影響範圍， 默認是5個像素 |
|
5、 FlipH, FlipV 濾鏡
FlipH, FlipV 濾鏡（水平反轉和垂直反轉）
語法：
FlipH 濾鏡語法 {filter:filph}
FlipV 濾鏡語法 {filter:filpv}
6、 Glow濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Glow ( sProperties ) "
環繞對象內容邊緣添加輝光製作發熱效果。輝光將出現在對象邊界內的內容的最外輪廓之外。
- 假如對象內有文本而無背景( background )和圖片，則每個文本字符將會被輝光環繞。
- 假如對象內有背景( background )或圖片，則整個對象容器會被輝光環繞。
- 假如對象的子對象定位超出了對象邊界，則僅僅在對象容器內的內容會被輝光環繞。
|
|
|
| glow濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | color |
color值 |
設置或檢索此濾鏡作用的顏色值。 | | strength |
強度，值爲1到255之間的任何整數，指定發光色力度和範圍 |
設置或檢索以對象爲基準的向外擴散距離。 |
|
7、 Gray濾鏡
語法：
CSS：filter : Gray ( enabled=bEnabled )
Scripting：object.style.filter = "Gray ( sProperties ) "
設置對象灰度顯示 |
|
|
| Gray濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 |
|
8、 Invert濾鏡
語法：
CSS：filter:Invert(enabled=bEnabled)
Scripting：object.style.filter = "Invert(sProperties)"
反相顯示對象內容 |
|
|
| Invert濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 |
|
9、 light濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Light ( sProperties ) "
爲對象的內容建立光照效果
每個濾鏡最多可以添加 10 束光。如果想在頁面上添加更多的光，必須使用多個濾鏡。 |
|
|
| glow濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | addAmbient |
object.filters.item('DXImageTransform.Microsoft.Light').addAmbient ( iRed , iGreen , iBlue , iStrength )
iRed : 必選項。整數值(Integer)。 指定紅色值。取值範圍爲 0 - 255 。
iGreen : 必選項。整數值(Integer)。 指定綠色值。取值範圍爲 0 - 255 。
iBlue : 必選項。整數值(Integer)。 指定藍色值。取值範圍爲 0 - 255 。
iStrength : 必選項。整數值(Integer)。 指定光強度。取值範圍爲 0 - 100 。 |
爲濾鏡添加環境光 | | addCone |
| iX1 |
: |
必選項。整數值(Integer)。指定光源的左座標值。 | | iY1 |
: |
必選項。整數值(Integer)。指定光源的上座標值。 | | iZ1 |
: |
必選項。整數值(Integer)。指定光源的Z座標值。 | | iX2 |
: |
必選項。整數值(Integer)。指定光焦點的左座標值。 | | iY2 |
: |
必選項。整數值(Integer)。指定光焦點的上座標值。 | | iRed |
: |
必選項。整數值(Integer)。指定紅色值。取值範圍爲 0 - 255 。 | | iGreen |
: |
必選項。整數值(Integer)。指定綠色值。取值範圍爲 0 - 255 。 | | iBlue |
: |
必選項。整數值(Integer)。指定藍色值。取值範圍爲 0 - 255 。 | | iStrength |
: |
必選項。整數值(Integer)。指定光強度。取值範圍爲 0 - 100 。 | | iSpread |
: |
必選項。整數值(Integer)。指定光源的虛擬位置與對象的表面之間的角度或張度。取值範圍爲 0 - 90 。 |
|
爲濾鏡添加錐形光 | | addPoint |
| iX |
: |
必選項。整數值(Integer)。指定光源的左座標值。 | | iY |
: |
必選項。整數值(Integer)。指定光源的上座標值。 | | iZ |
: |
必選項。整數值(Integer)。指定光源的Z座標值。 | | iRed |
: |
必選項。整數值(Integer)。指定紅色值。取值範圍爲 0 - 255 。 | | iGreen |
: |
必選項。整數值(Integer)。指定綠色值。取值範圍爲 0 - 255 。 | | iBlue |
: |
必選項。整數值(Integer)。指定藍色值。取值範圍爲 0 - 255 。 | | iStrength |
: |
必選項。整數值(Integer)。指定光強度。取值範圍爲 0 - 100 。 |
|
爲濾鏡添加點光 | | changeColor |
| iLightNumber |
: |
必選項。整數值(Integer)。指定光的標識符。此數值依據光被添加的順序編號。如第一個被添加的光的標識符就等於 0 。 | | iRed |
: |
必選項。整數值(Integer)。指定紅色值。取值範圍爲 0 - 255 。 | | iGreen |
: |
必選項。整數值(Integer)。指定綠色值。取值範圍爲 0 - 255 。 | | iBlue |
: |
必選項。整數值(Integer)。指定藍色值。取值範圍爲 0 - 255 。 | | fAbsolute |
: |
必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值，還是加到當前設置的相對值。此參數不等於零表示採用絕對值。否則表示採用相對值。
| false |
: |
指定改變是增加到當前設置的相對值。 | | true |
: |
指定改變是替換當前設置的絕對值。 |
|
|
改變光的顏色 | | changeStrength |
| iLightNumber |
: |
必選項。整數值(Integer)。 指定光的標識符。此數值依據光被添加的順序編號。如第一個被添加的光的標識符就等於 0 。 | | iStrength |
: |
必選項。整數值(Integer)。指定光強度。取值範圍爲 0 - 100 。 | | fAbsolute |
: |
必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值，還是加到當前設置的相對值。此參數不等於 0 表示採用絕對值。否則表示採用相對值。
| false |
: |
指定改變是增加到當前設置的相對值。 | | true |
: |
指定改變是替換當前設置的絕對值。 |
|
|
改變光的強度 | | clear |
|
清除所有與當前濾鏡關聯的光 | | moveLight |
| iLightNumber |
: |
必選項。整數值(Integer)。指定光的標識符。此數值依據光被添加的順序編號。如第一個被添加的光的標識符就等於 0 。 | | iX |
: |
必選項。整數值(Integer)。指定光源的左座標值。 | | iY |
: |
必選項。整數值(Integer)。指定光源的上座標值。 | | iZ |
: |
必選項。整數值(Integer)。指定光源的Z座標值。 | | fAbsolute |
: |
必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值，還是加到當前設置的相對值。此參數不等於 0 表示採用絕對值。否則表示採用相對值。
| false |
: |
指定改變是增加到當前設置的相對值。 | | true |
: |
指定改變是替換當前設置的絕對值。 |
|
|
移動錐形光的焦點或點光的原點 |
|
mask濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.MaskFilter ( sProperties ) "
將對象內容的透明像素用 color 參數指定的顏色顯示作爲一個遮罩，而非透明像素則轉爲透明。 |
|
|
| mask濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活 | | color |
color |
設置或檢索此濾鏡作用的顏色值 |
|
11、xray濾鏡
語法：
CSS：filter:xray(enabled=bEnabled)
Scripting：object.style.filter = "xray(sProperties)"
以X光效果顯示對象內容 |
|
|
| xray濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 |
|
12、Chroma濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Chroma ( sProperties ) "
將對象中指定的顏色顯示爲透明 |
|
|
| Chroma 濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | color |
color值 |
設置或檢索此濾鏡作用的顏色值。 |
|
13、wave濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance )
Scripting： object .style. filter = "progid:DXImageTransform.Microsoft.Wave ( sProperties ) "
爲對象內容建立波紋扭曲效果 |
|
|
| wave濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | add |
布爾值(Boolean)。true | false
true : 濾鏡作用圖像覆蓋原始圖像
false : 默認值。只顯示濾鏡作用圖像 |
設置或檢索濾鏡作用圖像是否覆蓋原始圖像 | | freq |
整數值(Integer)。默認值爲 3 |
設置或檢索濾鏡建立的波浪數目 | | lightStrength |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 100 |
設置或檢索濾鏡建立的波浪浪尖和波谷之間的距離 | | phase |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 0 |
設置或檢索正弦波開始處的相位偏移 | | strength |
整數值(Integer)。單位爲像素 |
設置或檢索以對象爲基準的在運動方向上的向外擴散距離 |
|
14、Emboss濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance )
Scripting： object .style. filter = "progid:DXImageTransform.Microsoft.Wave ( sProperties ) "
爲對象內容建立波紋扭曲效果 |
|
|
| wave濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | add |
布爾值(Boolean)。true | false
true : 濾鏡作用圖像覆蓋原始圖像
false : 默認值。只顯示濾鏡作用圖像 |
設置或檢索濾鏡作用圖像是否覆蓋原始圖像 | | freq |
整數值(Integer)。默認值爲 3 |
設置或檢索濾鏡建立的波浪數目 | | lightStrength |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 100 |
設置或檢索濾鏡建立的波浪浪尖和波谷之間的距離 | | phase |
整數值(Integer)。取值範圍爲 0 - 100 。默認值爲 0 |
設置或檢索正弦波開始處的相位偏移 | | strength |
整數值(Integer)。單位爲像素 |
設置或檢索以對象爲基準的在運動方向上的向外擴散距離 |
|
15、Engrave濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Engrave ( sProperties ) "
用灰度值爲對象內容製作浮雕紋理效果 |
|
|
| Engrave 濾鏡 | | 屬性|方法 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | Bias |
設置或檢索添加到濾鏡結果的每種顏色組分的值的百分比。大的此屬性值產生高亮濾光效果。高對比度的圖片受濾鏡的影響較小 |
浮點數(Float)。取值範圍爲 -1.0 - 1.0 。默認值爲 0.7 |
|
16、DropShadow濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive )
Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow ( sProperties ) " |
|
|
| DropShadow濾鏡 | | 屬性 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | function |
整數值(Integer) 0-25 |
設置或檢索混合方式 | | color |
color |
設置或檢索此濾鏡作用的顏色值。 | | offX |
整數值(Integer)。單位爲像素( px )。默認值爲 5 |
設置或檢索陰影在橫座標軸上以對象爲基準的偏移量。正值向右偏移，負值向左偏移 | | offY |
整數值(Integer)。單位爲像素( px )。默認值爲 5 |
設置或檢索陰影在縱座標軸上以對象爲基準的偏移量。正值向下偏移，負值向上偏移 | | positive |
布爾值(Boolean)。true | false
true : 默認值。濾鏡從對象的非透明像素建立陰影
false : 濾鏡從對象的透明像素建立陰影 |
|
|
17、Shadow濾鏡
語法：
CSS：filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
Scripting： object.style.filter = "progid:DXImageTransform.Microsoft.Shadow ( sProperties ) "
爲對象內容建立陰影效果 |
|
|
| Shadow濾鏡 | | 屬性 |
取值範圍 |
說明 | | enabled |
布爾值(Boolean)。 true | false
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。 |
設置或檢索濾鏡是否激活。 | | color |
color |
設置或檢索此濾鏡作用的顏色值。 | | direction |
0（上），45（右上）
90（右），135（右下）
180（下），225（左下）
270（左），315（左上） |
設置或檢索濾鏡效果的運動偏移方向。 | | strength |
整數值(Integer)。單位爲像素 |
設置或檢索以對象爲基準的在運動方向上的向外擴散距離。 |
|
