abstract：其實(shí)這個(gè)問題可以完全不需要使用js的，css3便可勝任。于是我闡述一下基本原理：1、模糊特效使用filter:blur；2、陰影效果使用box-shadow；3、鏤空效果最簡單的方法就是使用mask-image；4、透明層效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。基本的層邏輯順序是：<背景層>…<
其實(shí)這個(gè)問題可以完全不需要使用js的，css3便可勝任。于是我闡述一下基本原理：1、模糊特效使用filter:blur；2、陰影效果使用box-shadow；3、鏤空效果最簡單的方法就是使用mask-image；4、透明層效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。
基本的層邏輯順序是：
<背景層>
…<陰影層>
……<遮罩層>
………<模糊層>…模糊層必須和內(nèi)容并列(因?yàn)閷觾?nèi)元素都會被模糊)
………</模糊層>
………<透明層>…此處為最頂層內(nèi)容
………</透明層>
……</遮罩層>
…</陰影層>
</背景層>
于是我寫了一個(gè)比較簡單的例子（如下圖所示）：
// 知乎傳圖失敗了N次，好糾結(jié)啊=_=||| 另外請無視背景圖片的人物
效果就是上面這樣的，遮罩我要講一下，這里用的png圖片，如下圖所示：
這里遮罩圖片是有講究的，如果在PS中查看，白色部分是透明區(qū)域，黑色部分就是實(shí)色區(qū)域。也就是透明的部分即為挖空區(qū)域，支持漸變/虛化/外發(fā)光等的半透明使用（其實(shí)原理就是將RGBA的α透明通道提取疊加在了頁面上），利用這個(gè)原理還可以做毛玻璃效果：
上圖遮罩后得到如下效果：
作者：坑晨
鏈接：https://www.zhihu.com/question/39394958/answer/128849267
來源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。
還有人會問，圖片體積太大，而且瀏覽器放大頁面了，虛化效果不就模糊了嗎？這個(gè)不是問題，因?yàn)榭梢灾С謘vg，只不過svg必須是黑白的，不能透明色，虛化過渡可以使用黑白過渡，半透明就是灰色的，具體使用方法我就不再展開了，大家自行谷歌吧。
補(bǔ)充說明與延伸
【1】樓主如果想實(shí)現(xiàn)窗體非固定位置要怎么辦？（圖片位置不確定了）
其實(shí)大家可以試試css3的cale()參數(shù)功能，類似于函數(shù)計(jì)算
當(dāng)有數(shù)值填寫的屬性，例如width、height、top、left……就可以用到它，很強(qiáng)大哦
格式是 left: cale( ((100% - 50px)/2)*5 ) 這樣的
100%是父項(xiàng)的寬度，支持加減乘除，但是加減符號前后務(wù)必要加空格
【2】鏤空文字的陰影能不能也一起做出來呢？
答案是：當(dāng)然可以了！我只不過是偷懶了而已，其實(shí)完全能做出來的，方法也有很多。我舉個(gè)傻瓜一些的方法，你可以在那個(gè)鏤空的位置上覆疊文字，文字顏色全透明，外加文字內(nèi)陰影（text-shadow）
【3】為什么樓主圖片的模糊區(qū)域變亮了？如何實(shí)現(xiàn)的？
這個(gè)太簡單了，還是filter特效，這里我只是給大家演示了blur模糊的用法，其實(shí)樓主原圖的效果還用了提高亮度/飽和度/對比度之類的特效，大家自行百度嘍，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>