一、微云的实现
网站有一些改动的时候，为了让用户熟知新的操作位置，往往会增加一个引导，常见的方式就是使用一个黑色的半透明蒙版，然后需要关注的区域是镂空的。
然后上周五我去 微云 转悠的时候，也看到了引导层，于是职业病又犯了，去学习下别人是怎么实现的。下面是观测的结果：
为了实现镂空蒙层效果，作者发挥了小时候拼积木的才能，使用两层HTML结构，内层使用5块独立区域拼接形成，至于中间镂空的区域的阴影则是使用的图片实现的。
虽然最终的效果满足了产品的需求，对于用户而言，目的已经达到。但是，从代码质量层面、潜在的体验提升可能性、使用场景广度上来讲，还是弱了很多的。
举例来说，如果我们某个提示区域面积很大，那中间的那个镂空区域尺寸是不是要变，那后面的背景图片怎么办？搞新图，有人看到了使用了 background-size:cover , 那IE7,IE8怎么办？哦，可能微云不需要管IE7, IE8.
如果不需要管IE7, IE8，那这里的实现就显得更加小白了。我们实际上只需要一层标签，一层空标签就可以实现我们的效果，且不需要图片。
二、我的实现
主要在于思维方式的变化。拼积木这种想法大家都比较容易想到，符合日常认知，但是，但代码层面，我们可以进行思维转换，发散思考，偌大的半透明遮罩层，我们不要老想着背景色块背景色块，可以突破常规思维，把它认为是边框，一个很大很大的边框（我们平时使用border都是 1 像素巨多），这样，我们自然就有了镂空效果。
如下图示意：
但是，目前我们中间的镂空区域方的，有没有什么办法变成圆的呢？
自然有， 方法1 是元素设置超大圆角，但是，此时为了边框依然填满整个屏幕， border 边框尺寸要大大增大，但是，为了不影响页面的滚动条，我们必须再嵌套一层标签，就显得啰嗦了；
方法2则是方法1某些方面的逆向思维处理，就是把当前元素作为外层限制标签，里面重新生成一个大尺寸伪元素，实现自适应尺寸的圆角效果，这个好，HTML干净不啰嗦，CSS一步到位（代码如下示意）；
.cover::before { content: ''; width: 100%; height:100%; border-radius: 50%; border: 400px solid #000; position: absolute; left: -400px; top: -400px; /* 自己瞎填的参数，示意 */ box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);} 大家可以看到，上面的伪元素的各个参数都是固定参数值，与外部元素的尺寸什么的没有任何关系，只要外部元素尺寸不超过400，里面永远会有一个正椭圆的内阴影的镂空图形（因为超出部分会被 .cover 隐藏），要理解圆角和正椭圆的关系，可以参考我之前的文章：“ 秋月何时了，CSS3 border-radius知多少？ ”。
眼见为实，耳听为虚，您可以狠狠地点击这里： 一层标签实现网站引导镂空蒙版功能demo （点击黑色蒙层会有引导切换效果）
demo这个镂空蒙层所使用的HTML代码如下：
查看更多关于腾讯微云黑色遮罩引导蒙版更好的CSS实现方式_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114383