以旧焕新的css滤镜

嗯，不是以旧换新，是希望css滤镜这个旧东东能焕发出新的生命。在新出的css3的一些特性令大家大声叫好时，其实ie下的滤镜早已默默的实现了相似的功能。OK，话不多说，让我们挨个来看一下。

界面滤镜：

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。