Greater Dunnellon Historical Society

最好的圆角阴影插件-PIE.js

       pie.js可使IE6,7,8支持CSS3的部分渲染

例如:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

     

       演示:(请使用IE6,7,8查看)

http://dn-lxgx.qbox.me/pie.html

       jsg下载地址:http://css3pie.com/


      这个JS插件是我发现目前最好的,有了它,可使CSS3的画圆角框在所有浏览器兼容,因为其它的浏览器都支持CSS3圆角,而现在IE只IE9以上支持CSS3圆角。所以感觉非常实用,犹其对于JIMDO网站,很多大元素都是后台定义和控制好了,想要重新布局和定义在前台几乎是不可能,只有在CSS通过图片来定义圆角框架!实现起来非常麻烦!现在有了PIE.js让JIMDO网站和其它博客和网站系统变得异常简单和方便!

      

使用办法:

此API使用非常简单,只需要在页面头部引用

JavaScript Code复制内容到剪贴板
  1. <!--[if lt IE 9]>
  2. <script type="text/javascriptsrc="path/to/PIE.js"> </script>
  3. <![endif]-->

       jimdo网站使用起来更简单,那就是首先将PIE.JS上传到你自己的JIMDO网站,这样即使不调用,它也会自动在JIMDO全站运行!剩下的就是在CSS中分别定义元素在IE,火狐,谷歌内核的圆角样式。例如我对JIMDO留言系统元素其中的圆角定义如下:

       .commententry {padding: 8px;
  border-left: 2px solid #A0C044;border-right: 2px solid #A0C044;border-bottom: 2px solid

#A0C044;
    border-radius:0 0 8px 8px;
   
}
.com-meta {border-left: 2px solid #A0C044;border-bottom: 1px solid #A0C044;border-right: 2px solid #A0C044;border-top: 2px

solid #A0C044;
    border-radius:8px 8px 0 0 ;background: none repeat scroll 0 0 #F7F9F2;padding: 8px;
}
.zend_form textarea{outline:none;
padding:15px;overflow:scroll;overflow-x:hidden;
width:620px;height:150px;
 
    border: 1px solid #A0C044;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #A0C044 0 0 4px 1px;
    -moz-box-shadow: #A0C044 0 0 4px 1px;
    box-shadow: #A0C044 0 0 4px 1px;
    behavior: url(http://u.jimdo.com/www67/o/se1898f6aca8775dc/userlayout/js/pie.js);}


.zend_form input{padding:5px 5px 5px 5px ;outline:none;
   
    border: 1px solid #A0C044;
    background: #FFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: #A0C044 0 0 4px 1px;
    -moz-box-shadow: #A0C044 0 0 4px 1px;
    box-shadow: #A0C044 0 0 4px 1px;
    behavior: url(http://u.jimdo.com/www67/o/se1898f6aca8775dc/userlayout/js/pie.js);
}

Write a comment

Comments: 0