摘要：其实这个问题可以完全不需要使用js的，css3便可胜任。于是我阐述一下基本原理：1、模糊特效使用filter:blur；2、阴影效果使用box-shadow；3、镂空效果最简单的方法就是使用mask-image；4、透明层效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。基本的层逻辑顺序是：<背景层>…<
其实这个问题可以完全不需要使用js的，css3便可胜任。于是我阐述一下基本原理：1、模糊特效使用filter:blur；2、阴影效果使用box-shadow；3、镂空效果最简单的方法就是使用mask-image；4、透明层效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。
基本的层逻辑顺序是：
<背景层>
…<阴影层>
……<遮罩层>
………<模糊层>…模糊层必须和内容并列(因为层内元素都会被模糊)
………</模糊层>
………<透明层>…此处为最顶层内容
………</透明层>
……</遮罩层>
…</阴影层>
</背景层>
于是我写了一个比较简单的例子（如下图所示）：
// 知乎传图失败了N次，好纠结啊=_=||| 另外请无视背景图片的人物
效果就是上面这样的，遮罩我要讲一下，这里用的png图片，如下图所示：
这里遮罩图片是有讲究的，如果在PS中查看，白色部分是透明区域，黑色部分就是实色区域。也就是透明的部分即为挖空区域，支持渐变/虚化/外发光等的半透明使用（其实原理就是将RGBA的α透明通道提取叠加在了页面上），利用这个原理还可以做毛玻璃效果：
上图遮罩后得到如下效果：
作者：坑晨
链接：https://www.zhihu.com/question/39394958/answer/128849267
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
还有人会问，图片体积太大，而且浏览器放大页面了，虚化效果不就模糊了吗？这个不是问题，因为可以支持svg，只不过svg必须是黑白的，不能透明色，虚化过渡可以使用黑白过渡，半透明就是灰色的，具体使用方法我就不再展开了，大家自行谷歌吧。
补充说明与延伸
【1】楼主如果想实现窗体非固定位置要怎么办？（图片位置不确定了）
其实大家可以试试css3的cale()参数功能，类似于函数计算
当有数值填写的属性，例如width、height、top、left……就可以用到它，很强大哦
格式是 left: cale( ((100% - 50px)/2)*5 ) 这样的
100%是父项的宽度，支持加减乘除，但是加减符号前后务必要加空格
【2】镂空文字的阴影能不能也一起做出来呢？
答案是：当然可以了！我只不过是偷懒了而已，其实完全能做出来的，方法也有很多。我举个傻瓜一些的方法，你可以在那个镂空的位置上覆叠文字，文字颜色全透明，外加文字内阴影（text-shadow）
【3】为什么楼主图片的模糊区域变亮了？如何实现的？
这个太简单了，还是filter特效，这里我只是给大家演示了blur模糊的用法，其实楼主原图的效果还用了提高亮度/饱和度/对比度之类的特效，大家自行百度喽，filter效果非常丰富的。下面是我追加了filter: blur(5px) saturate(1.3) brightness(1.5); 的效果图：
简易代码：
<!doctype html><html><head><meta charset="utf-8"><title>遮罩特效</title><style type="text/css">#bbox {
width: 635px;
height: 674px;
margin: 5% auto;
background: url(bg.png) no-repeat;
overflow: hidden;
}#shadow {
width: 451px;
height: 450px;
margin: 112px 92px;
border-radius: 20px;
box-shadow: 0px 0px 12px rgba(0,0,0,0.50);
overflow: hidden;
}#box {
width: 451px;
height: 450px;
position: relative;
mask-image: url(xxx.png);
-webkit-mask-image: url(xxx.png);
}#bar {
width: 451px;
height: 450px;
float: left;
top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.30);
overflow: hidden;
}#momo {
width: 451px;
height: 450px;
float: left;
filter: blur(5px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5,MakeShadow=false);
-webkit-filter: blur(5px); -moz-filter: blur(5px);
background: url(bg.png) no-repeat center center;
top: 0px;
overflow: hidden;
}</style></head><body><div id="bbox">
<div id="shadow">
<div id="box">
<div id="momo"></div>
<div id="bar"></div>
</div>
</div></div></body></html>
