腾讯微云，在新用户刚进入网站时的提示。
第一眼看到这样的部分全透明遮罩的效果，感觉实现的方式有：
1.使用图片，在相应的位置进行挖空全透明处理。但是这样如果有多处提示，就得使用多张图片
2.或者像腾讯微云自己的实现方式，垒积木似的一块一块拼接，这样做缺点也很明显
在看到一篇博客上的思路，如果把白色区域看成div，黑色半透明部分看成div的各个border，这样事情就变得简单得多：
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景遮罩</title>
<style>
.cover {
display: block;
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border: 0 solid #000;
opacity: .75;
filter: alpha(opacity=75);
z-index: 9;
/* 边缘闪动问题fix */
box-shadow: 0 0 0 100px #000;
overflow: hidden;
width: 167px;
height: 39px;
border-width: 20px 1065px 2277px 48px;
display: block;
}
.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);
}
</style>
</head>
<body>
<h3>这是一个背景遮罩</h3>
<div class="cover" id="cover"></div>
</body>
</html>实现效果：
（这样我们只需要改变四面border的值，就能够改变border的位置，改变div的width 或者height就可以改变白色区域的形状。但是这样的缺点是只能形成有限的全透明形状）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。