css3入门

PIE.js使IE6,7,8支持部分常用CSS3渲染

字号+ 作者：admin 来源： 2014-11-16 21:49 我要评论( )

e

官网

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复制内容到剪贴板
  1. <!--[if lt IE 9]>
  2. <script type="text/javascript" src="path/to/PIE.js"> </script>
  3. <![endif]--> 

以下是jQuery的调用办法，把你需要渲染的样式名写上即可

JavaScript Code复制内容到剪贴板
  1. $(function() {  
  2.     $('.rounded').each(function() {  
  3.         PIE.attach(this);  
  4.     });  
  5. });  

 同样，如果要删除某个样式的CSS3效果

截图：

演示：（请使用IE6,7,8查看）

复制内容到剪贴板

  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>让IE678支持CSS3渲染 - HTML5中文网</title>  
  6. <script type="text/javascript" src="PIE.js"></script>   
  7. <style>  
  8. .tabBox .tabs {  
  9.     margin: 0;  
  10.     padding: 0 10px;  
  11.     overflow: hidden;  
  12.     margin-bottom: -1px;  
  13.     height: 2.25em;  
  14. }  
  15.   
  16. .tabBox .tabs li {  
  17.     float: left;  
  18.     list-style: none;  
  19.     margin: 0;  
  20.     padding: .25em .25em 0;  
  21.     height: 2em;  
  22.     overflow: hidden;  
  23.     position: relative;  
  24.     z-index: 1;  
  25.     border-bottom: 1px solid #FFF;  
  26. }  
  27.   
  28. .tabBox .tabs li.selected {  
  29.     z-index: 3;  
  30. }  
  31.   
  32. .tabBox .tabs a {  
  33.     float: left;  
  34.     height: 2em;  
  35.     line-height: 2em;  
  36.     -webkit-border-radius: 8px 8px 0 0;  
  37.     -moz-border-radius: 8px 8px 0 0;  
  38.     border-radius: 8px 8px 0 0;  
  39.     background: #EEE;  
  40.     border: 1px solid #CCC;  
  41.     border-bottom: 0;  
  42.     padding: 0 10px;  
  43.     color: #000;  
  44.     text-decoration: none;  
  45.     behavior: url(PIE.htc);  
  46. }  
  47.   
  48. .tabBox .tabs .selected a {  
  49.     background: #FFF;  
  50.     -webkit-box-shadow: #CCC 0 0 .25em;  
  51.     -moz-box-shadow: #CCC 0 0 .25em;  
  52.     box-shadow: #CCC 0 0 .25em;  
  53. }  
  54.   
  55. .tabBox .tabs a:hover {  
  56.     background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));  
  57.     background: -moz-linear-gradient(#EEF, #FFF 70%);  
  58.     background: linear-gradient(#EEF, #FFF 70%);  
  59.     -pie-background: linear-gradient(#EEF, #FFF 70%);  
  60. }  
  61.   
  62. .tabBox .content {  
  63.     clear: left;  
  64.     position: relative;  
  65.     z-index: 2;  
  66.     padding: 2em 1em;  
  67.     border: 1px solid #CCC;  
  68.     background: #FFF;  
  69.     -webkit-border-radius: 3px;  
  70.     -moz-border-radius: 3px;  
  71.     border-radius: 3px;  
  72.     -webkit-box-shadow: #CCC 0 0 .25em;  
  73.     -moz-box-shadow: #CCC 0 0 .25em;  
  74.     box-shadow: #CCC 0 0 .25em;  
  75.     behavior: url(PIE.htc);  
  76. }  
  77. </style>  
  78. </head>  
  79.   
  80. <body>  
  81. <div class="tabBox">  
  82.     <ul class="tabs">  
  83.         <li class="selected"><a href="#">选项一</a></li>  
  84.         <li><a href="#">选项二</a></li>  
  85.         <li><a href="#">选项三</a></li>  
  86.     </ul>  
  87.     <div class="content">  
  88.         <p><a href="http://www.html5china.com">请使用IE6,7,8浏览</a></p>  
  89.     </div>  
  90. </div>  
  91. </body>  
  92. </html>  

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读
{CSS}网站配色,CSS主色调配色方案_div+css布局教程

{CSS}网站配色,CSS主色调配色方案_div+css布

{CSS}DIV CSS制作的个性水平导航菜单实例_div+css布局教程

{CSS}DIV CSS制作的个性水平导航菜单实例_div

{CSS}总结新手学CSS轻易出现错误的内容_div+css布局教程

{CSS}总结新手学CSS轻易出现错误的内容_div+c

{CSS}关于学习DIV CSS的一些精妙问答_div+css布局教程

{CSS}关于学习DIV CSS的一些精妙问答_div+css

{CSS}学习CSS布局网页的一些实例_div+css布局教程

{CSS}学习CSS布局网页的一些实例_div+css布局

热门资讯
关注我们
关注微信公众号，了解最新精彩内容

Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习