当前位置: 代码迷 >> HTML/CSS >> PIE让IE支持CSS3圆角影子渐变等效果
  详细解决方案

PIE让IE支持CSS3圆角影子渐变等效果

热度:116   发布时间:2012-08-28 12:37:01.0
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

?