admin 管理员组文章数量: 887053
css3pie.让ie6,7,8也能支持css3部分效果
前端的攻城师们,Hign起来把,目前的CSS3越来越流行了,效果也越来越好了,可是蛋疼的IE9-就是不支持,肿么办呢?
难道做一个圆角边框、阴影、或者渐变也要用到图片吗? Oh .. It’s Shit. 今天看别人的源码的时候无意发现了一个以前未见过的神马咚咚…
pie.htc,这是神马?找Google大婶sos了几下瞬间查出来了,原来还有如此强大的工具.好,废话不说了.贴上效果图,
来自:.htm
先下载库文件:
打开后有5个文件
一、使用.htc hack
帮助1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .box{ margin : 20px auto 0 ; width : 300px ; height : 200px ; border : 1px solid #ccc ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px ; -webkit-box-shadow: #ddd 2px 2px 2px ; -moz-box-shadow: #ddd 2px 2px 2px ; box-shadow: #ddd 2px 2px 2px ; background : #EEFF99 ; background : -webkit-gradient(linear, 0 0 , 0 bottom , from( #9bbb59 ), to( #ffffff )); background : -moz-linear-gradient( #9bbb59 , #ffffff ); background : linear-gradient( #9bbb59 , #ffffff ); -pie- background : linear-gradient( #9bbb59 , #ffffff ); behavior: url (pie/PIE.htc); } |
二、使用JS hack
除了传统的.htc hack方法外,PIE还增加了一个PIE.js文件,就是存JS版本的hack,相对与传统的.htc hack,JS版本不会和.htc方法一样受到一些限制。
1.在页面引入PIE.JS
帮助1 2 3 | <!--[ if lt IE 10]> <script type= "text/javascript" src= "PIE.js" ></script> <![endif]--> |
2.未指定的元素添加需要的css属性(圆角、阴影或渐变).
帮助1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .box{ margin : 20px auto 0 ; width : 300px ; height : 200px ; border : 1px solid #ccc ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px ; -webkit-box-shadow: #ddd 2px 2px 2px ; -moz-box-shadow: #ddd 2px 2px 2px ; box-shadow: #ddd 2px 2px 2px ; background : #EEFF99 ; background : -webkit-gradient(linear, 0 0 , 0 bottom , from( #9bbb59 ), to( #ffffff )); background : -moz-linear-gradient( #9bbb59 , #ffffff ); background : linear-gradient( #9bbb59 , #ffffff ); -pie- background : linear-gradient( #9bbb59 , #ffffff ); } |
3.使用之前需要判断DOM是否加载完成,为了安全,还需要加上一些判断。例如使用jQuery的话,可以这样写:
帮助1 2 3 4 5 6 7 | $( function () { if (window.PIE) { $( '.rounded' ).each( function () { PIE.attach( this ); }); } }); |
使用JS的缺点:.htm
更多 :
本文标签: css3pie让ie6 7 8也能支持css3部分效果
版权声明:本文标题:css3pie.让ie6,7,8也能支持css3部分效果 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1693589028h230954.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论