最近發(fā)現(xiàn)一個用的特爽的文件 —— PIE.htc

因為需要圓角顯示頭像，又要兼容IE8，內(nèi)心是拒絕的，然后在網(wǎng)上搜了幾篇文，說的最多的是用ie-css3.htc和PIE.htc，一開始我是下載了ie-css3.htc，但是它實在是古老，而且支持的C3屬性也不多，后老我轉(zhuǎn)戰(zhàn)，去看關于PIE的文章。

PIE currently has full or partial support for the following CSS3 features

• border-radius
• box-shadow
• border-image
• linear-gradient as background image
• multiple background images

#myElement {

    background: #EEE;

    padding:2em;

    -moz-border-radius:1em;

    -webkit-border-radius:1em;

    border-radius:1em;

    behavior: url(PIE.htc);

}

無意中我去了PIE的官網(wǎng)css3pie.com，當時我還不知道這官網(wǎng)可以下載真正的PIE.htc，所有我一直停留在PIE作者的Github上github.com/lojjic/PIE，我下載了作者的項目，但是我特么發(fā)現(xiàn)并沒有出現(xiàn)PIE.htc這個文件！我甚至還問我朋友，當然，他們都不鳥我...我只能靠自己...在這之前我已經(jīng)下載了一個1.0版本的PIE.htc，但是我嫌棄他古老...而且結合作者的demo配上1.0版本的畫面實在是太丑了，我又回到了PIE的官網(wǎng)，突然發(fā)現(xiàn)右側導航欄有“download”，臥槽...我這...我這眼睛醉了...我下載了2.1版本的，打開有PIE.htc?。?！非常開心_{然后結合作者的demo，在IE上看非常爽，但是，這文件是有了，但是這途中我也遇到過坑啊}~~

首先1.0版本的，一定要把PIE.htc放到文件夾里在引用，不然沒效果

2.0版本的就不用一定要放一個文件夾內(nèi)，但是它必須要與PIE_IE678.js這個文件放同一個文件夾下，否則也是沒有效果的，最重要的一點，差點忘記說...引用必須是以html文件為準的相對路徑，不是css

我看作者的Github的評論，里面的人說要跟position:relative， z-index:1 一起使用，但是我不用也有效果...
還有就是作用于:hover的話會有延遲

天了嚕~~~
今天發(fā)現(xiàn)一個問題...behavior: url(PIE.htc)要用在眼看到的元素...怎么說呢，看下面：
需求：我想用一個盒子包住圖片，盒子是圓形，設置了overflow:hidden，圖片就會顯示圓形

html
      <div class="a">
          <div class="c">
              ![](./wubiaoti7.png)
          </div>
      </div>

css
 .a .c  {
        behavior: url(PIE-2.0beta1/PIE.htc);
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    .c img { width: 100%; height: 100%; display: block;}

在IE7的效果是這樣的

demo解釋：

html
      <div class="anthor">
          <span>
              ![](./wubiaoti7.png)
          </span>
      </div>

css
    .anthor span {
        behavior: url(PIE-2.0beta1/PIE.htc);
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 100px;
        height: 100px;
        background: pink;
        border: 1px solid green;
    }
    .anthor span img {
        width: 50px;
        height: 50px;
        display: inline-block;
        position: absolute;
        top: -20%;
        right: 0;
    }

效果圖

top:0 時的效果

所以，behavior: url(PIE-2.0beta1/PIE.htc)要對著想要變圓的元素用，不然沒反應...