有很多網頁在做引導時，遮罩層做成了縷空效果，最近我也遇到乙個這樣的需求，如圖：
最容易想到的方法是切圖，這個不用解釋了。
在網上找到的大部分做法都是用邊框，那麼我們來看一下邊框怎麼實現這個效果。
"mask">
.mask
複製**
仔細一看，咦，我的圓角呢？
原來是因為border-width設定越大，圓角會越不明顯，超過一定數值就會變成直角（可以把filter: blur(15px)去掉看看），而且設定border-radius百分比為 50% 以上才有效，但是縷空部分就會整個變圓了。
圓角大作戰
思考一下，想到了乙個迂迴的辦法，我可以給遮罩加乙個::before，然後用它來設定乙個寬度小的邊框，就可以實現圓角啦~ 那麼在上面的基礎上，再加幾個樣式：
/* 省略上面 */
.mask
.mask::before
複製**
缺點用上面的方法做完之後，我突然意識到用box-shadow做這個效果更簡單orz，**如下：
"mask">
.mask
複製**
純CSS遮罩層特效
demo 背景顏色 漸變 邊框圓角 相對定位 多餘邊框隱藏 滑鼠指標變成小手 box 設定乙個偽類before 前置的 content 內容設定為空 背景設定為透明背景顏色 寬高各為父級的百分百 整體透明度為0 定位為絕對定位 top 為 0 left 為 0 層次結構 index為0 transi...
css彈出遮罩層
說明 需要jquery支援，支援ie8 googlechrome，firefox，話不多說，上 html type button onclick showmaskshadow value 彈出遮罩層 class bgdiv div class contentdiv type button oncli...
css實現遮罩層 遮蓋整個視窗
當頁面內存在position為 absolute relative fixed屬性的元素時，想要實現遮蓋整個頁面，需要三步 示例如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 do...