小tip：CSS3下的圆形遮罩效果实现与应用

因为是使用纯洁的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等，你懂的）。不过个人观点没必要过多折腾，精力有限，应该放在更重要的事情上。

跟张鑫旭博客学习