以舊換新的css濾鏡

嗯，不是以舊換新，是希望css濾鏡這個舊東東能煥發出新的生命。在新出的css3的一些特性令大家大聲叫好時，其實ie下的濾鏡早已默默的實現了相似的功能。OK，話不多說，讓我們挨個來看一下。

界面濾鏡：
AlphaImageLoader：

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

說明：

sizingMethod：默認的image值就是相當于里面放個img，會撐開外層容器；crop即設置背景圖片；scale則是根據外層容器大小拉伸圖片。
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);
靜態濾鏡：
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
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%
Blur：
模糊效果。

語法：
filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true, pixelRadius=2.0, shadowOpacity=0.75)
說明：

makeShadow：是否轉化為陰影。
Chroma：

語法：
filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000ff)
說明：

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

語法：
filter:progid:DXImageTransform.Microsoft.Compositor(function=0)
說明：

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