PIE让IE支持CSS3圆角影子渐变等效果
日期：2014-05-17 浏览次数：20645 次
PIE让IE支持CSS3圆角阴影渐变等效果
最近做网站，想用CSS3，但IE真是个蛋疼的货，对CSS3的支持实在。。。最后有一天在github上发现了PIE，PIE网站上的介绍：
? ?PIE?makes Internet Explorer 6-9 capable of rendering ? ?several of the most useful?CSS3?decoration features.
?
目前，PIE支持的CSS3属性主要有：
?
?
?
border-radius box-shadow border-image CSS3 Backgrounds (-pie-background) Gradients?
?
我在网站中主要使用了 ?border-radius，box-shadow?gradients,整体来说，比使用图片方便，特别是渐变背景和圆角，节省 了很多处理图片的时间。就我目前使用的情况来看，这个项目的前景还是不错的，特别是在国内，IE盛行。。
?
PIE使用还是比较简单，以渐变为例：
behavior: url(/assets/PIE.htc); //PIE的文件放在位置 position: relative; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2DABE6), color-stop(100%, #6789C0)); background: -webkit-linear-gradient(#2DABE6, #6789C0); background: -moz-linear-gradient(#2DABE6, #6789C0); background: -o-linear-gradient(#2DABE6, #6789C0); background: -ms-linear-gradient(#2DABE6, #6789C0); -pie-background: linear-gradient(#2dabe6,#6789c0); //这句不可以少 background: linear-gradient(#2DABE6,#6789C0);?
同样，如果要用阴影：
behavior: url("/assets/PIE.htc");
position: relative;
-moz-box-shadow: #adadad 0px 0px 2px;
-webkit-box-shadow: #adadad 0px 0px 2px;
-o-box-shadow: #adadad 0px 0px 2px;
box-shadow: #adadad 0px 0px 2px;
?圆角：
behavior: url("/assets/PIE.htc");
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
?如果三个效果放在一个class中，可以只用一次behavior就可以了
如果使用PIE，请使用最新的beta5，处理了不少BUG。。pie项目地址：
https://github.com/lojjic/PIE
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
