IE浏览器兼容CSS3新属性border-radius

使用PIE对IE进行CSS3兼容介绍及渲染

重要功能实现：   可以使 IE6、7、8 、9 实现类似 chrome 和 firefox 
1.  更自然逼真的阴影效果，不再是以前那种丑陋的滤镜效果。 
2.  实现很自然的圆角效果 
3.  实现部分 CSS3  的强悍效果，如 多背景图，border-image，更强的背景渐变效果。 
4.  png 图片透明效果   

使用方法：   1.  .htc 大概是浏览器补丁模式 css中使用behavior 来加载即可自动实现效果，  

.text_border_radius{

            width:100px;

            height:100px;

            background-color: #00A0E9;

            position: relative;

            z-index: 1000;

            -moz-border-radius:  50px ;

            -webkit-border-radius:  50px;

            border-radius: 50px;

            behavior: url(PIE-1.0.0/PIE.htc);

        }

 

注意路径，最好是直接使用 URL 的绝对路径，   如果无法显示可能是 服务器端不支持该类型文件格式的解析，可以在服务器配置文件的   mime.types文件的末尾增加一行：text/x-component htc，运用该方法的时候一定要保证，该标签的轴高度，所以z-index一定要设置，要想z-index有作用又必须，使元素脱离文档流，所以就需要用到position,-moz-border-radius:
 50px ;  -webkit-border-radius:  50px;一定要加防止别的浏览器版本太低。   

2.  .js 方式,很灵活,简单   下载并解压缩  http://css3pie.com/download-latest  
使用  PIE.js  文件  

<script type="text/javascript" src="PIE.js"></script> 

<script type="text/javascript"> 

PIE.attach(document.getElementById("test")); 

</script> 

 

<script type="text/javascript" src="PIE.js"></script>; 

<script type="text/javascript"> 

PIE.attach(document.getElementById("test")); 

</script> 

最好放在 body 的最下面，这样将其包含到 html 页面后既可以使用

问题说明：    a.IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute
或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。所以，问题来了，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。
   b.IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方变。如果绝对路径于根目录，则CSS文件不方便移动；如果相对路径与HTML文档，则pie.htc文件在不同HTML页面见的重用性大大降低。同时，诸如border-image后面的URL属性路径也不好处理。    c.使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，例如圆角效果，我们可以设置border-top-left-radius表示左上圆角，但是PIE确实不支持这种写法的，只能是老老实实的缩写。
  d. 要想让IE浏览器支持htc文件，需要一个有着”text/x-component” 字样的content-type 头部，否则，会忽视behavior。绝大数web服务器提供了正确的content-type，但是还有一部分则有问题。   e.由于某种原因，您无法修改服务器配置（例如公用主机，或是空间服务商提供的服务器），您可以用一个PHP文件来间接调用htc文件。  

<?php  header( 'Content-type: text/x-component' );  include( 'pie.htc' );  ?> 

  通过PHP文件来增加一个含有“text/x-component”字样的Content-type头，同时调用pie.htc文件。需要将pie.php和pie.htc放在同一个文件夹目录下，同时CSS中的behavior写法应该是：  behavior: url(pie.php);

  f.直接对执行过PIE兼容的当前容器进行透明度是没有用的，因为JS会新生成一个自定义标签层叠在下面，可以用下面的步骤实现透明
 CSS 添加  

css3-container { filter:alpha(opacity=98); } 

 JS 添加 

$(‘.test’).prev(‘css3-container’).css({‘filter’:’alpha(opacity=98)’, ‘opacity’:0.98}); 


注意一点这东西用的时候，尽量别用别的框架，否则就会导致没有效果（本人在easy ui和 jsp 下反正是用不了）！！！

如果还是不行博主劝你直接来一张正方形的图片，中间掏出一个空心的圆形，虽然有很多限制但是真的简单的很多，[b]但是真的简单的很多，但是真的简单的很多！！（重要的事情说三遍）。[/b]