需求
有很多網頁在做引導時，遮罩層做成了縷空效果，最近我也遇到一個這樣的需求，如圖：
實現
常見方法
最容易想到的方法是切圖，這個不用解釋了。
在網上找到的大部分做法都是用邊框，那麼我們來看一下邊框怎麼實現這個效果。
<div class="mask"></div>
.mask {
position: absolute;
top: -1647px; // 由於邊框寬度太大
right: -1756px;
filter: blur(15px);
border-radius: 60px;
border: 2000px solid rgba(0,0,0,.6); // 為了蓋住整個頁面，把邊框設得比較大
width: 155px;
height: 80px;
}
複製程式碼實現效果如下：
仔細一看，咦，我的圓角呢？
原來是因為 border-width 設定越大，圓角會越不明顯，超過一定數值就會變成直角（可以把 filter: blur(15px) 去掉看看），而且設定 border-radius 百分比為 50% 以上才有效，但是縷空部分就會整個變圓了。
圓角大作戰
思考一下，想到了一個迂迴的辦法，我可以給遮罩加一個 ::before，然後用它來設定一個寬度小的邊框，就可以實現圓角啦~ 那麼在上面的基礎上，再加幾個樣式：
/* 省略上面 */
.mask {
overflow: hidden; // 用來隱藏 ::before 溢位
}
.mask::before {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 60px;
border: 10px solid;
}
複製程式碼雖然稍微麻煩了點，不過這樣就做出了我們想要的圓角了~！
缺點
- 比較麻煩，圓角要用偽元素做。
- 定位設定有點難計算，
border-width改變的話，相應地也要改top、left等。
有更好的方法嗎
用上面的方法做完之後，我突然意識到用 box-shadow 做這個效果更簡單Orz，程式碼如下：
<div class="mask"></div>
.mask {
position: absolute;
top: 350px;
right: 244px;
width: 155px;
height: 80px;
filter: blur(15px);
border-radius: 60px;
box-shadow: 0 0 0 2000px rgba(0,0,0,.6);
}
複製程式碼效果很完美（如果不考慮舊版瀏覽器的話 =w=），用這個方法更好，因為
- 圓角輕鬆實現；
box-shadow不會影響元素位置，定位只需要根據 content 的位置寫。