原文:

border-radius实现圆角效果

1 CSS3代码：2 3 -webkit-border-radius:10px;4 -moz-border-radius:10px;5 border-radius:10px;6 background-color:#666;7 width:200px;height:100px;

Firefox，Chrome Google，Safari等浏览器的显示效果如图0-0：

                     图0-0

但是IE这个异类不支持CSS3的这个属性，在IE9下的显示效果如图0-1：

                     图0-1

但是不能放任它不管，还是找办法解决这个兼容性问题。

解决方案：在CSS文件中通过behavior属性——这个属性只能被IE识别，引入一个htc文件, ie-css3.htc

这个是由Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。

1 div{ 2     -webkit-border-radius:10p; 3     -moz-border-radius:10px; 4     border-radius:10px; 5     background-color:#666; 6     width:200px; 7     height:100px; 8     color:#fff; 9     behavior: url(ie-css3.htc);10 }

截两幅图看看效果，一幅来自IE6，一幅来自IE9：

                                             

                                                                                                                                                                     

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

box-shadow实现阴影效果

1  2  3  4     
      5      6     20 21 22     
     
      23         
      24     
     
25 26 

Chrome,Firefox,IE9下的效果显示:

接下来要做的事情，想必读者朋友都知道了，兼容IE6-8。首先想到的IE的滤镜。来看看效果吧。

1 加上滤镜之后的代码片段: 2  3 div img{ 4             background-color: #fff; 5             -webkit-box-shadow:5px 5px 5px #000; 6             -moz-box-shadow:5px 5px 5px #000; 7             box-shadow:5px 5px 5px #000; 8             width:295px; 9             height:300px;10             /* For IE 8 */11             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";12             /* For IE 5.5 - 7 */13             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');14         }

测试之后的效果，分别是IE5.5-IE8：

虽然差强人意，但凑合着用。如果有朋友知道除此之外的方法，能否告知一声，共同进步嘛！^_^

opacity实现透明度效果

1 div img{  2     width:295px; 3     height:300px; 4     -webkit-opacity:0.3; 5     -moz-opacity:0.3; 6     opacity: 0.3; 7     /*for IE 6,7,8*/ 8     filter:alpha(opacity=30); 9     border:1px solid #ccc;10 }

兼容IE 6,7,8。效果（来自IE6）：

transform:rotate(度数) 将元素旋转X度

1  2  3  4     
      5      6     20 21 22     
     
      23         24     
     
25 26 

让我们来去看看transform的兼容性:

以上代码已经实现了对以上浏览器及其版本的支持，但是IE6,7,8呢？俗话说，兵来将挡，水来土掩，山人自有妙计，只不过这妙计是借来的。