ie-css3.htc 讓IE6, 7, and 8也支持box-shadow
首先下載ie-css3.htc腳本,然后在css中加入:
它的使用方法是:下載它并放到你的服務器目錄
在你的head/head里面寫入下面的代碼:
復制代碼代碼如下:
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5 , future browsers, and now also Internet Explorer 6using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5 , future browsers and IE6using IE-CSS3 */
behavior: url(ie-css3.htc);
}
注意:behavior: url(ie-css3.htc) 中的ie-css3.htc地址用絕對路徑或者直接傳到網站的根目錄下面,要不然可能會看不到效果 。
IE-CSS3.HTC下載地址:
下載地址: 點擊下載 前往官網
當你使用了這個htc文件后,你的CSS里面,只要寫有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一種,IE就會渲染 。
當使用了這個htc文件后,你不能這樣寫box-shadow: 0 0 10px red; 而應該是box-shadow: 0px 0px 10px red; 否則IE中會失效 。
不支持RGBA值中的alpha透明度 。
不支持inset內陰影 。
不支持陰影擴展 。
陰影在IE中只會顯示為黑色,不管你設置成其它什么顏色 。
但是,這個腳本了僅僅是讓IE支持了部份的box-shadow值 。
方法二:
在head/head標簽里加入如下代碼:
復制代碼代碼如下:
style type="text/css"
img{background: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
*filter:
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}
/style
其中:color是投影的顏色,direction是順時針的角度值,strength是投影的大小值 。
