［CSS］IE下的濾鏡效果

界面濾鏡

1. AlphaImageLoader
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png, sizingMethod=image)
     注意，ie8要採用-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(...)"的方式，下同。

   • 說明：

     sizingMethod：默認的image值就是相當於里面放個img，會撐開外層容器；crop即設置背景圖片；scale則是根據外層容器大小拉伸圖片。

2. Gradient - 漸變效果
   因為只能指定startColor和endColor，也不能加stop，所以實際應用上往往不能符合需求。
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF000000, endColorStr=#FF000000, gradientType=0)

   • 說明：

     startColorStr：注意這裡採用的是ARGB的格式，不是常見的RGB，也不是RGBA。
     gradientType: 默認0豎向，1橫向。

   • 對比：

     相比之下，新的css強大太多，有stop，有權重，有多個方向。
     firefox 3.6：-moz-linear-gradient(top, blue, white 80%, orange)
     safari 4, chrome：-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(#ff0000);

靜態濾鏡

1. Alpha - 透明效果
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishOpacity=0, style=1, startX=0, startY=0, finishX=100, finishY=100)

   • 說明：

     style：一般用的就是默認值0，設定整個元素的透明度。1表示線性漸變，用上了其餘的所有屬性。2表示放射性漸變，即橢圓形的，由里向外。3表示矩形漸變，即x形的，由外向裡。

   • 對比：

     other browsers：opacity: 0.8

2. BasicImage
   灰度效果、鏡像效果、遮罩效果、透明效果、旋轉效果、X光效果。
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, invert=0, mask=1, mirror=0, opacity=100, rotation=1, xray=1)

   • 說明：

     mask：以透明部分為遮罩。
     maskcolor：css中屬性無效，但用js指定有效，指定mask為1時不透明部分的顏色，如0xff000000，採用0xAARRGGBB格式。
     rotation：1表示順時針轉90度，2表示180，3表示270。xray：拍一個x光片，grayScale的反像。

   • 對比：

     css的rotation除了角度，基準點自由指定外，一個最大的不同就是，css的旋轉後原來的位置還是會被佔據，就如同position:relative的效果一樣。
     firefox 3.5：-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0%
     safari 4, chrome：-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0%
     opera 10.5：-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0%

3. Blur - 模糊效果
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true, pixelRadius=2.0, shadowOpacity=0.75)

   • 說明：

     makeShadow：是否轉化為陰影。

4. Chroma
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000ff)

   • 說明：

     color：指定的顏色值變為透明，採用#AARRGGBB格式。

5. Compositor
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Compositor(function=0)

   • 說明：

     function：指定合成的函數，用數值表示，0-10，19-25。

6. DropShadow - 陰影效果
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.DropShadow(offX=5, offY=5, positive=true)

   • 說明：

     positive：false的話不透明部分也生成陰影。

   • 對比：

     又是css勝出，可以指定具體顏色，最主要是filter沒有模糊，實際意義不大。
     other browsers：text-shadow:2px 2px 2px #333333

7. Emboss - 浮雕效果
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Emboss(bias=0.7)

   • 說明：

     bias：-1.0到1.0。

8. Engrave - 雕刻效果
   與Emboss的區別就是Emboss是凸出來，這個是凹進去。
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.7)

   • 說明：

     bias：-1.0到1.0。

9. Glow - 外發光效果
   
   
   • 語法：

     filter:progid:DXImageTransform.Microsoft.Glow(color=#ff0000, strength=5)

   • 說明：

     color：光暈顏色，採用#RRGGBB格式。

   • 對比：

     本來想用來模擬ff默認的focus outline效果，但是濾鏡使用後，外發光也會佔據實際位置，會改變dom元素位置，而且最要命的是光標還保持在原來的位置，沒有隨著移動，所以放棄。
     other browsers：outline

10. Matrix - 矩陣變換濾鏡
    
    
    • 語法：

      filter:progid:DXImageTransform.Microsoft.Matrix(dx=1, dy=1, filterType="bilinear", m11=1, m12=0, m21=0, m22=1, sizingMethod="clip to original")

    • 說明：

      filterType：選擇使用bilinear還是nearest neighbor算法來生成濾鏡效果，一般默認就OK了，不用管它。sizingMethod：默認變換後的圖片會以原圖片位置為基准進行裁剪，所以要想看到全貌的話需要設置為'auto expand'字符串。

    • 對比：

      相比於BasicImage的rotation，這個與css的transform效果更加接近，只是應用了效果後會再度以原dom的左上角為基准進行調整。
      firefox 3.5：-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0%
      safari 4, chrome：-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0%
      opera 10.5：-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0%

11. MotionBlur - 動態模糊效果
    
    
    • 語法：

      filter:progid:DXImageTransform.Microsoft.MotionBlur(add=false, direction=270, strength=5)

    • 說明：

      add：模糊後的圖片是否覆蓋原先的圖片，默認值false，設為true的話就是殘影效果。
      direction：取值從0,45,90...315，以45為間隔，默認值是270，即left。

12. RevealTrans - 動態變換效果
    不知道為什麼官方會把這個歸入靜態濾鏡，這個必須要js介入，要調用apply和play函數才會生效，或者用<meta http-equiv="page-enter" content="revealtrans(... )">作用與整個頁面。
    
    
    • 語法：

      filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=23)

    • 說明：

      transition：23表示隨機應用各種變換效果，其餘的值都可以用動態濾鏡更加有效的代替，不推薦使用。

13. Shadow - 投影效果
    這個與DropShadow的最大區別就是，Shadow陰影始終與源相連，DropShadow則是偏移。
    
    
    • 語法：

      filter:progid:DXImageTransform.Microsoft.Shadow(color=#ff0000, direction=270, strength=1)

    • 說明：

      color：陰影顏色，採用#RRGGBB格式。

    • 對比：

      可以額外指定x或y軸各自的偏移，並且text-shadow的話與源不是粘連在一起，而box-shadow的話也只會渲染出box外的部分。
      other browsers：text-shadow:2px 2px 2px #333333或者box-shadow:2px 2px 2px #333333

14. Wave - 波浪效果
    
    
    • 語法：

      filter:progid:DXImageTransform.Microsoft.Wave(add=false, freq=3, lightStrength=100, phase=0, strength=1)

    • 說明：

      add：波紋圖片是否覆蓋原先的圖片，默認值false。
      freq：波的數量，默認3。
      lightStrength：光亮程度，取值0-100，默認值100。
      phase：波紋起始位置百分比，取值0-100。
      strength：波紋偏移像素，默認1。

由於動態濾鏡生效都需要js介入，在這裡就不一一介紹了，可以參看RevealTrans。
綜合來看，比較有實際應用意義的，應該是alpha或basicimage，shadow，blur或motionblur，matrix，也許，再加一個gradient。


資料來源：
以旧焕新的css滤镜