怎么使IE6/IE7/IE8兼容CSS3的圆角、阴影样式

今天遇到一个前端页面设计的问题，在ie9以后的浏览器版本中border-radius能够很好的显示，但是在ie8以前的版本中，却不能兼容。所以在这个页面中用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，找了几个方法基本上都是使用“PIE.htc”实现，不过有些文档不完整所以实现不了，现在自由拾图网温州天时网站建设有用到特意整理一下，原文如下： 

  CSS3是个好东西，功能很强大，但是IE6，IE7，IE8不支持、或者不完全支持CSS3的属性；这样使得CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等不能得到很好兼容。

因为IE6时代，没有什么标准，而因为各种原因，IE6用户几乎不会更新IE版本。 

让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。 

VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。 

也就是说，IE下面，可以用 VML做出圆角 。半透明、阴影 、渐变背景。 

早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。。。 

它可以让IE6，IE7，IE8 支持 CSS3特效…… 

之前的 bug 一直有一个严重 bug，今天上去看的时候，官方修正了这个Bug ，并且增加了js 渲染方法（之前是用behavior导入）。

看看如何调用：

1、在你的网页加载 PIE.js 脚本。 

注意，用IE专用的注释，防止非IE浏览器下载，引入js文件。

<!--[if lt IE 10]>
 
<script type="text/javascript" src="PIE.js"></script>
 
<![endif]-->

2、用js 调用：

$(function() {
 
    if (window.PIE) {
 
        $('.rounded').each(function() {
 
            PIE.attach(this);
 
        });
 
    }
 
});

3、已经搞定了。

在让 IE6支持 CSS3 的所有插件中，这个应该是最好的插件了。

官方实时测试例子：http://css3pie.com/

官方下载：http://css3pie.com/download-latest  

本地下载地址：  PIE-1.0.0.zip

注意：

1、behavior的url里一定要填写pie.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性：position:relative;

.divimg{ width:240px; height:240px;  position:relative; margin-bottom:18px; border:solid 2px #fff; -moz-border-radius:240px; -webkit-border-radius:240px;border-radius:240px; z-index:2;  behavior:url(pie.htc);overflow:hidden;}

3、因为在IE浏览器下这些CSS 3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上 右 下 左”。

6、在头部加载pie.js文件；

7、在本地预览无效，得传到服务器环境下，或者本地服务器环境