其实这个问题可以完全不需要使用 js 的，css3 便可胜任。于是我阐述一下基本原理：1、模糊特效使用 filter:blur；2、阴影效果使用 box-shadow；3、镂空效果最简单的方法就是使用 mask-image；4、透明层效果使用 background-color: rgba() 或 opacity；5、防止模糊外漏使用 overflow: hidden。

基本的层逻辑顺序是：

…

……

…………模糊层必须和内容并列(因为层内元素都会被模糊)

………模糊层>

…………此处为最顶层内容

………透明层>

……遮罩层>

…阴影层>

背景层>

于是我写了一个比较简单的例子(如下图所示)：

// 知乎传图失败了N次，好纠结啊=_=||| 另外请无视背景图片的人物！

效果就是上面这样的，遮罩我要讲一下，这里用的png图片，如下图所示：

这里遮罩图片是有讲究的，如果在PS中查看，白色部分是透明区域，黑色部分就是实色区域。也就是透明的部分即为挖空区域，支持渐变/虚化/外发光等的半透明使用(其实原理就是将RGBA的α透明通道提取叠加在了页面上)，利用这个原理还可以做毛玻璃效果：

上图遮罩后得到如下效果：

还有人会问，图片体积太大，而且浏览器放大页面了，虚化效果不就模糊了吗？这个不是问题，因为可以支持svg，只不过svg必须是黑白的，不能透明色，虚化过渡可以使用黑白过渡，半透明就是灰色的，具体使用方法我就不再展开了，大家自行谷歌吧。

补充说明与延伸：

【1】楼主如果想实现窗体非固定位置(图片位置不确定)要怎么办？

其实大家可以试试 css3 的 calc() 参数功能，类似于函数计算。当有数值填写的属性，例如width、height、top、left… 就可以用到它，很强大哦。格式是 left: calc( ((100% - 50px)/2)*5 ) 这样的，100%是父项的宽度，支持加减乘除，但是加减符号前后务必要加空格。

【2】镂空文字的阴影能不能也一起做出来呢？

答案是：当然可以了！我只不过是偷懒了而已，其实完全能做出来的，方法也有很多。我举个傻瓜一些的方法，你可以在那个镂空的位置上覆叠文字，文字颜色全透明，外加文字内阴影(text-shadow)。

【3】为什么楼主图片的模糊区域变亮了？如何实现的？

这个太简单了，还是filter特效，这里我只是给大家演示了blur模糊的用法，其实楼主原图的效果还用了提高亮度/饱和度/对比度之类的特效，大家自行百度喽，filter效果非常丰富的。下面是我追加了 filter: blur(5px) saturate(1.3) brightness(1.5); 的效果图：

简易代码：

#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;

}