會的朋友提供一下建議,不會的朋友學習一下。
下載地址:PIE.htc
要使用 PIE 應用就要先把它引進來,這里不是在 html 文件里面引入,而是在 css 文件里面使用 behavior 來對文件進行導入。這里會涉及到一個路徑的問題。比如 當前文件在“/”下 ,CSS文件在“/CSS”下,PIE.htc在“/CSS”下,behavior: url(/css/PIE.htc)而不是behavior: url(PIE.htc) 。
ps :PIE.htc URL路徑是相對于當前HTML文件,不是CSS文件.
以下代碼都是基于下面這段公共的樣式進行編寫:
.borderRadius{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ABCDEF; behavior: url(css/PIE.htc);}
運行效果圖
ps :不支持單邊的圓角屬性,比如: border-top-left-radius,但是你可以這樣來寫:
.borderRadius{ border-radius: 0px 20px 0px 20px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; background: #ABCDEF; behavior: url(css/PIE.htc);}
運行效果圖
.boxShadow{ box-shadow: 10px 10px 10px #000; -webkit-box-shadow: 10px 10px 10px #000; background: #ABCDEF; behavior: url(css/PIE.htc);}
運行效果圖
.linearGradient{ background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/ background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/ background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/ background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/ background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/ background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/ -pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/ behavior: url(css/PIE.htc);}
運行效果圖
ps :只支持linear-gradient(線性漸變)
黑色背景,透明值為60%
ps:不支持box-shadow
.png img{ -pie-png-fix: true; behavior: url(/PIE.htc);}.png{ background-image:url(img.png); -pie-background:url(img.png); behavior: url(/PIE.htc);}
ps:圖片直接用-pie-png-fix: true,背景圖片使用-pie-background來修復IE6下png透明的問題
由于我這邊沒有IE6內(nèi)核的瀏覽器,所以這個就無法測試給大家看了,要是有興趣的可以自己試試看。不過我覺得這個也沒有那么重要了,畢竟IE6基本都被舍棄了,現(xiàn)在很多公司最舊的版本也就兼容到IE7,再老的就變成老古董了。
.backgroundSize{ background:#ABCDEF url(wait.png) center no-repeat; background-size: contain; /*behavior: url(css/backgroundsize.min.htc);*/ behavior: url(css/backgroundsize.min.htc);}
沒有加htc的效果
加htc運行效果圖
框框的寬高的是200x100,圖片的寬高是180x180,這樣圖片的高就超過了框的邊界,如果使用背景圖片就要使用到background-size來讓背景圖片被包含,但是IE9以下是不支持的。
caniuse.com
以上的是我暫時對PIE的用法的一個理解,要是有更多的用法,請給我留言!如有更多知識,會繼續(xù)補充!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。