CSS3属性在IE中的特殊处理

#opacity透明度

opacity: 0.4; /*Chrome、Safari、Firefox、Opera */ 
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*  IE8 */

#border-radius圆角效果

 -moz-border-radius: 15px; /*Firefox*/ 
 -webkit-border-radius: 15px; /*Safari、Chrome*/ 
 border-radius: 15px; /*Opera 10.5+、IE 6+*/ 
 behavior: url(ie-css3.htc); /* 调用脚本添加圆角效果 */

圆角属性的使用和 CSS 圆角属性一致，只是在后面多添加了一句 behavior: url(ie-css3.htc)。behavior 属性只被 IE 浏览器支持和识别，用来告诉 IE 在哪些设置了该样式 Class 的元素上调用脚本添加圆角效果。

缺陷：在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心。

#box-shadow 盒阴影

/*；滤镜实现代码*/ 
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */ 
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ 
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', 
 Direction=145, Strength=3);

/*VML脚本实现*/

-moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ 
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ 
 box-shadow: 2px 2px 3px #969696; /* Opera 10.5+、IE6+*/ 
 behavior: url(ie-css3.htc); /* 调用脚本添加阴影效果 */

 

#text-shadow文字阴影

#Granients渐变

　　/* background-image*/
 background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ 
 background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */ 
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */ 
 -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

/*background*/

 background:#000000;
 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/

 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);/*火狐*/
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));/*Safari 4-5,Chrome 1-9*/
 background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);/*Safari5.1 Chrome 10+*/
 background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);/*opera 11.10+*/
 background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);/*IE 10*/
 background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

#RGBA

 background: rgba(50, 95, 224, .4); 
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#886287a7', endColorstr='#886287a7'); /* IE7 */

 

#Rotation旋转

-webkit-transform: rotate(90deg); 
 -moz-transform: rotate(90deg); 
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

参数 rotation 的选项为 1、2、3 和四，分别代表旋转 90 度、180 度、270 度和 360 度。和 CSS3 中的旋转 360 度功能相比，IE 中的旋转滤镜功能就显得十分有限了，每次 90 度的旋转很难满足开发人员的需求。

另外 dojo 在 1.5 版本对 CSS3 中的 transform 属性开始有一定的支持，其中包括了 matrix、rotate、skew、scale、translate 等功能。如果有 CSS3 形变需求的话，可以参考使用 dojo 对这部分功能的扩展。

使用 dojo 设置 HTML 元素旋转

 dojox.html.ext-dojo.style("transform","rotate(10deg)");