在IE下的旋转滤镜有两种：
第一种：
CSS样式
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)
其中rotation属性只有四个值：0,1,2,3 分别表示的旋转度数是：0度，90度，180度，270度。查看参考文档，请点击这里，但是想要旋转其他任意度数上面的方法就不适合了，这就需要下面的方法。
第二种
CSS样式
filter:progid:DXImageTransform.Microsoft.Matrix(enabled=bEnabled ,SizingMethod=sMethod ,FilterType=sType ,Dx=fDx ,Dy=fDy ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
enabled:定义滤镜是否被禁止使用，取值范围为布尔值，当取值为true的时候滤镜可用；取值为false时，禁止使用滤镜。
SizingMethod:定义元素使用图片时是否改变属性。当取值为clip to original时，元素不改变尺寸；当取值为auto expand时，元素改变尺寸。
FilterType:定义元素旋转的方法。当取值为bilinear时，使用平滑、静态的显示效果；nearest neighhbor一般用于动态滤镜中。
Dx:定义水平方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。
Dy:定义垂直方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。
M11：定义元素右侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，右边线向右移动，同时拉伸元素的宽度；当取值小于1.0时，右边线向左移动，同时减小元素的宽度。
M12:定义元素底侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为0时。当取值大于0时，底部连线向右移动，同时拉伸元素的宽度；当取值小于0时，底部边线向左移动，同时拉伸元素的宽度。
M21：定义元素右侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为0。当取值大于0时，底部边线向下移动，同时拉伸元素的高度；当取值小于0时，底部边线向上移动，同时拉伸元素的高度。
M22：定义元素底侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，底部边线向下移，同时拉伸元素的高度；当取值小于1.0时，右边线向上移动，同时减小元素的高度。
以上是此滤镜全部的参数，但是平时用的最多的参数只有5个，所以可以简化为：
CSS样式
filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=sMethod ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
SizingMethod一般选择“auto expand”，它和“clip to original”值的区别如下图（图中旋转角度都为45度）：
下面来说下如何计算旋转值，也就是如何计算M11,M12,M21,M22的值。
其实也很简单，用计算器算即可，如果你要做旋转动画，那么需要JS去计算，M11=cos(角度值),M12=-sin(角度
值),M21=sin(角度值),M22=cos(角度值)。例如：你想要旋转10度，那么sin(10)约=0.174,cos(10)
约=0.985,所以四个值相应为：M11=0.985,M12=-0.174,M21=0.174,M22=0.985
在这里也想提下，IE Matrix滤镜还可以实现放大和缩小的效果，类似于zoom样式，只要将M11,M12,M21,M22的值乘以相应的倍数即可。
Ps：在IE6和IE7中如果将滤镜写在<style>标签或者样式表中，会出现以下两个问题，
此滤镜之后的样式都会失效；
旋转滤镜一个页面中只允许有一个。
这两点的解决方案是：将滤镜样式直接内嵌在元素标签上。
如果有更好的解决方法可以留言。想了解更多Matrix滤镜，请猛戳这里和这里
这样配合CSS3样式transform即可兼容所有浏览器实现旋转效果。
线性渐变在CSS3和IE滤镜中的实现
对于完美主义者来说，为了一个渐变而使用一张图片是一件痛苦的事情，就像有鼻屎不抠掉一样痛苦= =。所以对于普通的渐变而言，能用CSS解决的就不去动用图片。
CSS3中为我们提供了linear-gradient方法，可以直接对背景设置渐变。
CSS Code复制内容到剪贴板
<!DOCTYPE>
<style>
div {
width:100pxheight:100pxtext-align:center
font:16px/100px '微软雅黑'color:#FFF
/*以下是CSS3的线性渐变*/
background:-webkit-linear-gradient(top,#FD0,#C30)
background:-moz-linear-gradient(top,#FD0,#C30)
background:-o-linear-gradient(top,#FD0,#C30)
}
</style>
<div>次碳酸钴</div>
但是CSS3也是很蛋疼的东西，他需要个浏览器前缀。造成了这玩意儿得写三行。这个方法通常使用三个参数（也可用更多参数调更多色，这个以后再说）。第一个参数是渐变的方向，top是从上到下，至于left、right、bottom的效果很容易从top推倒出来我就不罗嗦了。CSS3还支持特定角度的渐变，第一个参数可以用度数比如45deg就是斜角渐变，但是这东西在IE上实现起来很困难，这里先不多说了。第二第三个参数是渐变的颜色，这个从代码上看就一目了然的。CSS3的颜色可以用rgba来实现透明，比如50%透明的红色：rgba(255,0,0,0.5)，注意透明通道的取值范围是0到1之间。
接下来就说说坑爹的IE，IE下需要通过渐变来实现，对于IE9那半吊子的CSS3我已经吐槽无力了，老老实实的用滤镜比较好。
CSS Code复制内容到剪贴板
<!DOCTYPE>
<style>
div {
width:100pxheight:100pxtext-align:center
font:16px/100px '微软雅黑'color:#FFF
/*以下是IE的线性渐变*/
filter:progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=#FFDD00,EndColorStr=#CC3300
)
}
</style>
<div>次碳酸钴</div>
看吧，IE也很容易实现这样简单的渐变，虽然代码长了一些。这里要注意的是滤镜里的颜色不能用简单的#HHH去定义，必须写上完整的六位十六进制。如果需要同明度，就在前面加两位作为透明度，比如50%透明的红色：#80FF0000。在渐变方向上，IE没有CSS3那么丰富的方向可以旋转，但是最基本的垂直和水平还是可以做到的。默认是从上往下的渐变，可以加上GradientType=1让渐变变成从左往右的。
CSS Code复制内容到剪贴板
div {
filter:progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=#FFDD00,EndColorStr=#CC3300,GradientType=1
)
}
既然用滤镜和CSS3都可以兼容实现，那么做个全兼容也就是把上面的方法合并起来而已。
CSS Code复制内容到剪贴板
<!DOCTYPE>
<style>
div {
width:100pxheight:100pxtext-align:center
font:16px/100px '微软雅黑'color:#FFF
/*全兼容线性渐变*/
background:-webkit-linear-gradient(top,#FD0,#C30)
background:-moz-linear-gradient(top,#FD0,#C30)
background:-o-linear-gradient(top,#FD0,#C30)
filter:progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=#FFDD00,EndColorStr=#CC3300
)
}
</style>
<div>次碳酸钴</div>
元素投影效果在CSS3和IE滤镜中的实现
按照惯例，先说说CSS3的投影效果。
CSS Code复制内容到剪贴板
<!DOCTYPE>
<style>
div {
width:100pxheight:100pxtext-align:center
font:14px/100px 微软雅黑
border:1px solid #CCC
/*CSS3投影效果*/
box-shadow:0px 0px 10px #CCC
}
</style>
<div>次碳酸钴</div>
这个box-shadow不需要加浏览器兼容头，我最喜欢这样的CS3了！IE9虽然也支持CSS3，不过那坑爹货BUG太多，我不喜欢用IE9的CSS3。就这个投影效果而言，IE9对于设置了collapse的TABLE元素使用投影会无效。总之IE就是各种BUG，不过反正是要兼容到IE6的，就无视IE9的这些半吊子CSS3好了。
在IE上实现投影效果还是挺麻烦的，虽然IE有Shadow滤镜，但是那玩意儿和线性渐变没区别，不能达到CSS3的那种效果。我就不示范了，想知道那玩意儿的效果是什么样自己试试就好。IE的一大堆滤镜中只有Blur这个滤镜可以达到类似的效果，可是如果把Blur直接用在元素上会让内容也模糊了，所以我们要创建一个新元素对它Blur，让后再把这个新元素置入原元素的底下作为背景。这就涉及到一堆坐标计算，如果居中的元素使用投影效果，还涉及到浏览器调整大小时元素的位移计算。所以IE实现它最好用JS写。我已经把注释写的很详细了，看这个代码应该就可以明白。
CSS Code复制内容到剪贴板
<!DOCTYPE>
<style>
.shadow {
width:100pxheight:100pxtext-align:center
font:14px/100px 微软雅黑
border:1px solid #CCC
background:#FFF
position:relative
}
.shadow-IE {
display:block
position:absolutebackground:#CCC
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=5)
}
</style>
<div class="shadow">次碳酸钴</div>
<script>
//判断IE
var isIE=/MSIE/i.test(navigator.userAgent)
if(isIE){
//获取全部元素，其实可以用document.all的，不过习惯这样写
var all=document.getElementsByTagName("*"),s=[],i=0
//把class为shadow的元素全放进s这个数组中
while(o=all[i++])if(o.className=="shadow")s.push(o)
//遍历s数组
for(i in s){
//创建一个元素，我习惯用u，其实用什么都可以
var o=s[i],u=document.createElement("u")
//把父元素设置成相对定位
o.parentNode.style.position="relative"
//对IE6、7要加个hasLayout，不然坐标计算会出错
o.parentNode.style.zoom=1
//把创建的元素放到shadow元素的上方
//一定要是上方，因为下面的元素会挡住上面的元素
o.parentNode.insertBefore(u,o)
//给创建的元素应用个样式
u.className="shadow-IE"
//把宽度和高度设置到创建的元素上
u.style.width=o.offsetWidth+"px"
u.style.height=o.offsetHeight+"px"
}
//当窗口改变大小时触发
window.resize=function(){
//遍历s数组
for(i in s){
//我们在上面创建的元素移动到需要的位置
var o=s[i],p=o.previousSibling
p.style.top=o.offsetTop-5+"px",
p.style.left=o.offsetLeft-5+"px"
}
}
//主动触发一次这个事件，让里面的代码在加载时执行一次
window.resize()
}
</script>
#gradient {/* Firefox*/
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 )
/* Safari & Chrome */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) ,
color-stop( 1, #81a8cb ))
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb',
endColorstr = '#4477a1' )
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb',
endColorstr = '#4477a1' )"
}
文档上只提供2个颜色，所以我们也拿它没办法。但是想提醒一下，使用渐变无论哪个浏览器对其性能都是影响很大的。fixed 圆角 投影 渐变这是最影响浏览器性能的几个css属性
