使IE浏览器支持CSS3属性（圆角、阴影、渐变、文字阴影）

CSS3的大多新属性(比如：圆角、阴影、渐变、文字阴影等)在 FF、Chrome、Opera都还支持，但是IE 6-8是一点也不支持的，今天提供PIE.htc解决IE浏览器对CSS3属性的支持问题，让IE也能实现一些常见的CSS3效果，如圆角(border-radius)，盒阴影(box-shadow)，文字阴影(text-shadow) 背景渐变(gradient)，多图片背景(multiple background images)。

一. htc文件下载地址：http://github.com/lojjic/PIE/downloads
二.  CSS文件测试代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title></title>
    6. <style>
    7. .shadow{
    8. order: 1px solid #696;
    9. padding: 60px 0;
    10. text-align: center; width: 200px;
    11. -webkit-border-radius: 8px;
    12. -moz-border-radius: 8px;
    13. border-radius: 8px;
    14. -webkit-box-shadow: #666 0px 2px 3px;
    15. -moz-box-shadow: #666 0px 2px 3px;
    16. box-shadow: #666 0px 2px 3px;
    17. background: #FF99AF;
    18. background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF99AF), to(#CDEE33));
    19. background: -webkit-linear-gradient(#FF99AF, #CDEE33);
    20. background: -moz-linear-gradient(#FF99AF, #CDEE33);
    21. background: -ms-linear-gradient(#FF99AF, #CDEE33);
    22. background: -o-linear-gradient(#FF99AF, #CDEE33);
    23. background: linear-gradient(#FF99AF, #CDEE33);
    24. -pie-background: linear-gradient(#FF99AF, #CDEE33);
    25. behavior: url(css/PIE/PIE.htc);   //PIE.htc文件路径,该文件路径是相对于html页面的文件路径,如果用到.css文件,该文件路径依然是相对于html页面的路径
    26. }
    27. </style>
    28. </head>
    29. <body>
    30. <div class="shadow">
    31. CSS3属性（圆角、阴影、渐变、文字阴影）
    32. </div>
    33. </body>
    34. </html>

三. 显示效果（IE8浏览器截图）

使IE浏览器支持CSS3属性（圆角、阴影、渐变、文字阴影）

posted @ 2013-07-29 15:04  四叶草2010  阅读(446)  评论(0)  编辑  收藏  举报