PIE.js使IE6,7,8支持部分常用CSS3渲染(转)
官网
http://css3pie.com
名称：PIE.js
?
此JS可使IE6,7,8支持CSS3的部分渲染
例如：
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
?
使用办法：
此API使用非常简单，只需要在页面头部引用
JavaScript Code复制内容到剪贴板
- <!--[if lt IE 9]>
- <script?type="text/javascript"?src="path/to/PIE.js">?</script>
- <![endif]-->?
以下是jQuery的调用办法，把你需要渲染的样式名写上即可
JavaScript Code复制内容到剪贴板
- $(function()?{??
- ????$('.rounded').each(function()?{??
- ????????PIE.attach(this);??
- ????});??
- });??
?同样，如果要删除某个样式的CSS3效果
截图：
演示：（请使用IE6,7,8查看）
http://www.html5china.com/html5demo/Pie/
代码：
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
- <html?xmlns="http://www.w3.org/1999/xhtml">??
- <head>??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
- <title>让IE678支持CSS3渲染?-?HTML5中文网</title>??
- <script?type="text/javascript"?src="PIE.js"></script>???
- <style>??
- .tabBox?.tabs?{??
- ????margin:?0;??
- ????padding:?0?10px;??
- ????overflow:?hidden;??
- ????margin-bottom:?-1px;??
- ????height:?2.25em;??
- }??
- ??
- .tabBox?.tabs?li?{??
- ????float:?left;??
- ????list-style:?none;??
- ????margin:?0;??
- ????padding:?.25em?.25em?0;??
- ????height:?2em;??
- ????overflow:?hidden;??
- ????position:?relative;??
- ????z-index:?1;??
- ????border-bottom:?1px?solid?#FFF;??
- }??
- ??
- .tabBox?.tabs?li.selected?{??
- ????z-index:?3;??
- }??
- ??
- .tabBox?.tabs?a?{??
- ????float:?left;??
- ????height:?2em;??
- ????line-height:?2em;??
- ????-webkit-border-radius:?8px?8px?0?0;??
- ????-moz-border-radius:?8px?8px?0?0;??
- ????border-radius:?8px?8px?0?0;??
- ????background:?#EEE;??
- ????border:?1px?solid?#CCC;??
- ????border-bottom:?0;??
- ????padding:?0?10px;??
- ????color:?#000;??
- ????text-decoration:?none;??
- ????behavior:?url(PIE.htc);??
- }??
- ??
- .tabBox?.tabs?.selected?a?{??
- ????background:?#FFF;??
- ????-webkit-box-shadow:?#CCC?0?0?.25em;??
- ????-moz-box-shadow:?#CCC?0?0?.25em;??
- ????box-shadow:?#CCC?0?0?.25em;??
- }??
- ??
- .tabBox?.tabs?a:hover?{??
- ????background:?-webkit-gradient(linear,?0?0,?0?70%,?from(#EEF),?to(#FFF));??
- ????background:?-moz-linear-gradient(#EEF,?#FFF?70%);??
- ????background:?linear-gradient(#EEF,?#FFF?70%);??
- ????-pie-background:?linear-gradient(#EEF,?#FFF?70%);??
- }??
- ??
- .tabBox?.content?{??
- ????clear:?left;??
- ????position:?relative;??
- ????z-index:?2;??
- ????padding:?2em?1em;??
- ????border:?1px?solid?#CCC;??
- ????background:?#FFF;??
- ????-webkit-border-radius:?3px;??
- ????-moz-border-radius:?3px;??
- ????border-radius:?3px;??
- ????-webkit-box-shadow:?#CCC?0?0?.25em;??
- ????-moz-box-shadow:?#CCC?0?0?.25em;??
- ????box-shadow:?#CCC?0?0?.25em;??
- ????behavior:?url(PIE.htc);??
- }??
- </style>??
- </head>??
- ??
- <body>??
- <div?class="tabBox">??
- ????<ul?class="tabs">??
- ????????<li?class="selected"><a?href="#">选项一</a></li>??
- ????????<li><a?href="#">选项二</a></li>??
- ????????<li><a?href="#">选项三</a></li>??
- ????</ul>??
- ????<div?class="content">??
- ????????<p><a?href="http://www.html5china.com">请使用IE6,7,8浏览</a></p>??
- ????</div>??
- </div>??
- </body>??
-
</html>??
本文转自：http://www.html5china.com/CSS3/20110503_1556.html
