純 CSS 實現縷空遮罩層

需求

有不少網頁在作引導時，遮罩層作成了縷空效果，最近我也遇到一個這樣的需求，如圖：

實現

常見方法

最容易想到的方法是切圖，這個不用解釋了。

在網上找到的大部分作法都是用邊框，那麼咱們來看一下邊框怎麼實現這個效果。

<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 的位置寫。