前端的攻城師們,Hign起來把,目前的CSS3越來越流行了,效果也越來越好了，可是蛋疼的IE9-就是不支持，腫么辦呢?
難道做一個圓角邊框、陰影、或者漸變也要用到圖片嗎? Oh .. It’s Shit. 今天看別人的源碼的時候無意發(fā)現(xiàn)了一個以前未見過的神馬咚咚…
pie.htc,這是神馬?找Google大嬸sos了幾下瞬間查出來了,原來還有如此強大的工具.好，廢話不說了.貼上效果圖，
來自： http://www.zhjie.net/css3pie-ie678-will-support-css3-effects.htm
先下載庫文件： http://css3pie.com/download-latest
一、使用.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
除了傳統(tǒng)的.htc hack方法外，PIE還增加了一個PIE.js文件，就是存JS版本的hack，相對與傳統(tǒng)的.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的缺點：
http://www.zhjie.net/css3pie-ie678-will-support-css3-effects.htm
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
