css3pie.让ie6,7,8也能支持css3部分效果


前端的攻城师们,Hign起来把,目前的CSS3越来越流行了,效果也越来越好了,可是蛋疼的IE9-就是不支持,肿么办呢?
难道做一个圆角边框、阴影、或者渐变也要用到图片吗? Oh .. It’s Shit. 今天看别人的源码的时候无意发现了一个以前未见过的神马咚咚…
pie.htc,这是神马?找Google大婶sos了几下瞬间查出来了,原来还有如此强大的工具.好,废话不说了.贴上效果图,

先下载库文件:http://css3pie.com/download-latest 

打开后有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

<!--[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的话,可以这样写:

$(function() {
    if (window.PIE) {
        $('.rounded').each(function() {
            PIE.attach(this);
        });
    }
});

使用JS的缺点:
1.需要引入额外的JS文件
2.需要判断DOM完全加载,在DOM没有加载完成前,看到的是原先的没任何效果的box,所以会有一个闪烁的过程。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值