因為是使用純潔的CSS3實現，因此，IE6~8瀏覽器又將被侵豬籠。

看一下效果：

HTML程式碼：

<a href="#" class="test_outer">
    <span class="test_cover trans"></span>
    <img src="wuluqiaola.jpg" width="521"> // 嗯 圖片寄幾替換
</a>

CSS程式碼：

* {
    padding: 0;
    margin: 0;
  }

  .trans {
    /*transition*/
    -webkit-transition
 
: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
  }

  .test_outer {
    display: block;
    width: 512px;
    height: 381px;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
  }

  .test_cover {
    width
 
: 100px;
    height: 100px;
    border: 512px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    position: absolute;
    left: -197px;
    top: -465px;
  }

  .test_cover:hover {
    width: 150px;
    height: 150px;
    left: -207px;
    top: -490px;
  }

  .test_cover:hover:after {
    content: "看，美男！";
    margin
 
: 50px 0 0 -30px;
    color: #fff;
    font: bold 20px/1.2 '微軟雅黑';
    text-shadow: 1px 1px rgba(0, 0, 0, .35);
    position: absolute;
  }

原理

雖說效果離不開CSS3，但，最最關鍵的核心屬性是CSS border屬性，偌大的半透明邊框屬性（demo中邊框寬度512畫素），邊框顏色為rgba黑色半透明，然後50%圓角。

相關CSS程式碼：

.test_cover {
    width: 100px;
    height: 100px;
    border: 512px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    position: absolute;
    left: -197px;
    top: -465px;
  }

很簡單吧，然後父標籤來個尺寸限制，溢位隱藏就完事大吉了。

實際應用

由於本效果是CSS驅動的，因此對於PC瀏覽器，目前還無法投入實際應用，但是，如果針對Android或是iphone、ipad等裝置開發頁面，該技術就可以有實際的應用了。

應用背景如下：
當我們退出一款新的產品的時候，所有的使用者都是new user，他們面對一個新穎陌生的產品，肯定會有一些不熟悉的地方，此時，一個善意的引導與說明就很有必要。既可以展示產品的優點，又方便使用者上手操作。

此時，我們可以嘗試使用遮罩效果（可以將使用者的注意力focus在一點上）來做引導提示，體驗會很舒服。

demo展示GIF：

CSS程式碼：

.trans {
    /*transition*/
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.test_outer {
    width: 320px;
    height: 480px;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}
.test_cover {
    width: 60px;
    height: 60px;
    border: 480px solid rgba(0, 0, 0, .45);
    border-radius: 50%;
    position: absolute;
}

.test_cover_pos1 {
    left: -227px;
    top: -478px;
}
.test_cover_pos1:after {
    content: '☺首先選擇您所在的城市';
    margin: 16px 0 0 -140px;
}

.test_cover_pos2 {
    left: -447px;
    top: -378px;
}
.test_cover_pos2:after {
    width: 140px;
    content: '☺全新推圖訂餐服務，給你不一樣的體驗！';
    margin: 16px 0 0 60px;
}

.test_cover_pos3 {
    left: -337px;
    top: -48px;
}
.test_cover_pos3:after {
    content: '☺隨時撥打訂餐！';
    margin: -20px 0 0 -20px;
    white-space: nowrap;
}

.test_cover_pos1:after, .test_cover_pos2:after, .test_cover_pos3:after {
    color: #fff;
    font-family: '微軟雅黑';
    text-shadow: 1px 1px rgba(0,0,0,.35);
    position: absolute;
}

HTML程式碼：

<div class="test_outer">
    <span id="testCover" class="test_cover test_cover_pos1 trans"></span>
    <img src="/study/image/radius_cover_wap_bg.png" width="320" height="480" border="0" />
</div>

JS：

(function(stepIndex) {
    var objStep = document.getElementById("testCover");
    var funStep = function() {
        objStep.className = objStep.className.replace(/\d/, (stepIndex + 1));
        stepIndex++;
        if (stepIndex > 2) {
            stepIndex = 0;
        }
        setTimeout(funStep, 3000);
    };
    setTimeout(funStep, 3000);
})(1);

原理與上面的簡單demo一直，多的就是用指令碼做定時播放了哈！demo頁面有完整的程式碼展示，這裡就不平白撐篇幅了。

關於浸豬籠的瀏覽器：

IE瀏覽器實際上也是可以實現類似的效果的，這裡的類似是指同樣可以實現中間鏤空，四周半透明的遮罩（濾鏡，你懂的）；至於圓角效果，如果你精力足夠，也是可以折騰出來的（VML等，你懂的）。不過個人觀點沒必要過多折騰，精力有限，應該放在更重要的事情上。

跟張鑫旭部落格學習