很多時候，我們需要通過一層半透明的遮罩層來把后面的一切整體調暗，以便凸顯某個特定的UI元素，引導用戶關注，比如彈出層或者交互指南。
這個效果的傳統(tǒng)方法就是增加一個額外的HTML元素用于遮擋背景添加如下樣式：
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.8);
}
.lightbox { /*需要引起用戶注意的元素*/
position: absolute;
z-index: 1;
}
.overlay 遮罩層負責把這個元素背后所有的東西調暗。.lightbox需要指定一個更高的z-index，一邊繪制在遮罩層的上層。這個方法的優(yōu)點：穩(wěn)定可靠，缺點：需要增加額外的HTML。那怎么由CSS單獨實現(xiàn)呢？
box-shadow方案
我們可以用偽元素消除額外的HTML元素，比如：
body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
缺點： 移植性不好， <body>元素上可能有其他需求已經(jīng)占用了 ::before元素，而且使用這個效果需要JS 給<body>添加dimmed這個類，如果把遮罩層交給元素自己的::bofore偽元素來實現(xiàn)，就可以彌補不足。給偽元素設置z-index:-1;就可以讓它出現(xiàn)在元素的背后。盡管這解決了可移植的問題，但無法對遮罩層Z軸層次進行細粒度的控制，它可能出現(xiàn)在這個元素之后（期望的），但也可能出現(xiàn)在這個元素的父元素活著祖先元素之后。這個方法還有一個問題，偽元素無法綁定獨立的JS事件處理函數(shù)。
box-shadow方案
具體做法就是生成一個巨大的投影，不偏移不模糊，簡單拙劣的模擬遮罩層效果：
box-shadow: 0 0 0 999px rgba(0,0,0,.8);
為了確保遮罩層總是可以覆蓋視口，我們換用視口單位來解決它。因為我們無法分開制定的水平和垂直方向的直徑，所以這里最合適的視口單位為vmax。1vmax相當于1vw和1vh兩者中較大值，因此滿足我們需求的最小值就是50vmax。由于投影是同時向四個方向擴展的，這個遮罩層的最終尺寸將是100vmax加上元素本身的尺寸。
position: fixed;
top: 50%; left: 50%;
margin: -200px;
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
缺點： 如果頁面很長而為此擴大投影的擴張半徑就不太明智。
優(yōu)點：可以有限度的使用該技巧，比如配合固定定位來使用，或者當頁面沒有滾動條時再用。
backdrop 方案
如果你想引導用戶關住的元素就是一個模擬的<dialog>元素，（<dialog>元素可以由它的showModal()方法顯示出來），那么根據(jù)瀏覽器的默認樣式，它會自帶一個遮罩層。借助::backdrop偽元素，這個原生的遮罩層可以設置樣式的，比如可以把它變的更暗一些：
<button onclick="document.querySelector('#modal').showModal()">Click me</button>
<dialog id="modal">O HAI!
<button onclick="this.parentNode.close()">Close</button>
</dialog>
dialog::backdrop { background: rgba(0,0,0,.8)}
缺點：瀏覽器對其支持比較有限，再次使用之前，確認一下兼容性的問題。
優(yōu)點：盡管瀏覽器還不支持，對話框沒有遮罩層也不會導致任何功能的缺失，因為它只是用戶體驗的增強手段而已。
