關於box-shadow、border-radius不兼容ie8的解決辦法

本來從css3兼容ie9+挺好的，可是總有一些共識要求ie8+,於是就有了我們的苦逼的找解決辦法。之前在網上查到一些說用 PIE.htc.

But 我就是按照他說的寫的沒有管用。請教了一下別人才會寫了。就我遇到的問題來說吧。

先說 box-shadow:

<style>

.div{

width:500px;

height:200px;

border: 1px solid #eaeaea;

behavior: url(pie.htc);

 

-moz-box-shadow: 0px 0px 14px 1px #eaeaea;

-webkit-box-shadow: 0px 0px 14px 1px #eaeaea;

 box-shadow: 0px 0px 14px 1px #eaeaea;

 

}

 

</style>

<div class="div">

   邊框陰影
</div>

 

可是ie8下不支持就加上PIE.htc,注意上邊的連接地址，需要注意的有兩點：

    1.這個文件應該放到和.html文件同級位置。（下載地址：http://css3pie.com/download/）

  這個就可以

 

     2.雖然文件名稱是大寫，如果確保路徑沒問題還不管用時候就試試小寫

 

border-radius:

這個是在做上傳頭像時候。就是不管你的頭像是什么形狀，放進去后就是圓的，類似於這樣

 

里邊的圖片就是這樣的，

同樣的

<style>

p{ 

width: 135px;

 height: 135px;

border: 1px solid #ddd; 

text-align: center; 

behavior: url(pie.htc);

border-radius: 50%; 

overflow: hidden;

 

}

</style>

<p>
<img src="images/ac1.jpg" alt="" width="232">
</p>

 

可是ie8下不支持就加上PIE.htc,注意上邊的連接地址，需要注意的有兩點：

    1.這個文件應該放到和.html文件同級位置。（下載地址：http://css3pie.com/download/）

  這個就可以

 

     2.雖然文件名稱是大寫，如果確保路徑沒問題還不管用時候就試試小寫

 最后找解決辦法的時候發現PIE.htc這個還是可以解決好多屬性值，因為沒用到就不一 一說了，有興趣的可以自己去查查。

介紹htc，它可以讓IE瀏覽器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。。（可以參考這個  https://zhidao.baidu.com/question/2119635727166906667.html）