純 CSS 實現縷空遮罩層

lwenn發表於2018-07-20
CSS遮罩

需求

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

image

實現

常見方法

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

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

<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;
}
複製程式碼

實現效果如下：

image

仔細一看，咦，我的圓角呢？

原來是因為 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 的位置寫。

相關文章