CSS中經常使用遮罩層來實現頁面效果，比如彈窗、提示、加載等等。下面是一些常見的遮罩層的實現方式：

1. 使用偽元素:before或:after來創建遮罩層。

.modal:before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

通過設置偽元素的content屬性為空字符串，position屬性為fixed，占據整個視口，背景色可以設為半透明的黑色。

2. 使用絕對定位和寬高來創建遮罩層。

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

通過將元素設置為fixed定位，占據整個視口，背景色可以設為半透明的黑色。

3. 使用box-shadow來創建遮罩層。

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
z-index: 9999;
}

通過給元素設置一個很大的box-shadow來占據整個視口，顏色可以設為半透明的黑色。

無論使用哪種方式來創建遮罩層，在需要顯示的時候，只需要將元素的display屬性設置為block或者給它添加一個顯示的類名即可。