如果你不懂得用css在IE瀏覽器上應(yīng)用CSS3屬性,那么你可以使用ie-css3.js這個(gè)插件。該插件可以讓CSS3屬性在IE瀏覽器上起作用。
為了使用這個(gè)插件,你需要先下載文件。到ie-css3的下載頁(yè)面下載ie-css3.js。下載完成后,將下載的文件放在你的項(xiàng)目文件夾中。
還沒(méi)有下載代碼?可以使用以下命令進(jìn)行下載: $ wget https://github.com/lojjic/PIE/raw/master/PIE.js
將文件下載到你的項(xiàng)目文件夾中后,你需要在HTML頁(yè)面中添加以下代碼:
<!--[if lt IE 9]> <script src="ie-css3.js"></script> <![endif]-->
注意:這個(gè)插件僅在IE瀏覽器中起作用。
使用ie-css3.js,你可以在IE瀏覽器上使用CSS3圓角、陰影、旋轉(zhuǎn)、動(dòng)畫等屬性,代碼如下:
.box{ background-color: #fff; border:1px solid #ccc; padding: 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 2px #ccc; -webkit-box-shadow:2px 2px 2px #ccc; box-shadow:2px 2px 2px #ccc; -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); transform:rotate(5deg); -webkit-animation:myAnimation 1s; -moz-animation:myAnimation 1s; animation:myAnimation 1s; } @-webkit-keyframes myAnimation{ from { -webkit-transform:rotate(5deg);} to { -webkit-transform:rotate(45deg);} } @-moz-keyframes myAnimation{ from { -moz-transform:rotate(5deg);} to { -moz-transform:rotate(45deg);} } @keyframes myAnimation{ from { transform:rotate(5deg);} to { transform:rotate(45deg);} }
在以上例子中,你可以看到我們使用了多個(gè)CSS3屬性,在IE瀏覽器中只有在使用了ie-css3.js之后才能夠起作用。