官网bAiHTML5中文学习网 - HTML5先行者学习网
http://css3pie.combAiHTML5中文学习网 - HTML5先行者学习网
名称:PIE.jsbAiHTML5中文学习网 - HTML5先行者学习网
bAiHTML5中文学习网 - HTML5先行者学习网
此JS可使IE6,7,8支持CSS3的部分渲染bAiHTML5中文学习网 - HTML5先行者学习网
例如:bAiHTML5中文学习网 - HTML5先行者学习网
border-radiusbAiHTML5中文学习网 - HTML5先行者学习网
box-shadowbAiHTML5中文学习网 - HTML5先行者学习网
border-imagebAiHTML5中文学习网 - HTML5先行者学习网
multiple background imagesbAiHTML5中文学习网 - HTML5先行者学习网
linear-gradient as background imagebAiHTML5中文学习网 - HTML5先行者学习网
bAiHTML5中文学习网 - HTML5先行者学习网
使用办法:bAiHTML5中文学习网 - HTML5先行者学习网
此API使用非常简单,只需要在页面头部引用bAiHTML5中文学习网 - HTML5先行者学习网
JavaScript Code复制内容到剪贴板
- <!--[if lt IE 9]>
- <script type="text/javascript" src="path/to/PIE.js"> </script>
- <![endif]-->
以下是jQuery的调用办法,把你需要渲染的样式名写上即可bAiHTML5中文学习网 - HTML5先行者学习网
JavaScript Code复制内容到剪贴板
- $(function() {
- $('.rounded').each(function() {
- PIE.attach(this);
- });
- });
同样,如果要删除某个样式的CSS3效果bAiHTML5中文学习网 - HTML5先行者学习网
截图:bAiHTML5中文学习网 - HTML5先行者学习网
演示:(请使用IE6,7,8查看)bAiHTML5中文学习网 - HTML5先行者学习网
http://www.html5china.com/html5demo/Pie/bAiHTML5中文学习网 - HTML5先行者学习网
代码:bAiHTML5中文学习网 - HTML5先行者学习网
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>