CSS遮罩層是Web開發中常用的技術，它可以在頁面上覆蓋一層半透明或者全透明的黑色或白色或其他顏色的遮罩，從而達到強調某個內容或者防止用戶誤操作的效果。接下來我們來學習如何使用純CSS實現遮罩層效果。

/* HTML */
<div class="mask">
<h2>這是遮罩層的內容</h2>
</div>
<button id="open">打開遮罩層</button>
/* CSS */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* 使用半透明黑色遮罩 */
display: none;
z-index: 9999;
/* 遮罩層中的內容垂直居中 */
display: flex;
align-items: center;
justify-content: center;
}
/* 按鈕點擊打開遮罩層 */
#open {
margin-top: 200px;
margin-left: 300px;
}
#open:focus ~ .mask {
display: flex;
}

上述代碼中，我們給遮罩層設置了固定定位，寬高都是100%（即占據整個窗口），背景色使用rgba函數實現半透明的黑色，z-index設置為一個較高的值，以保證遮罩層在最頂層顯示。在按鈕的:focus狀態下，我們使用CSS的兄弟選擇器“~”來選中遮罩層，并讓其顯示（display:flex）。另外，遮罩層中的內容使用flex布局，實現垂直和水平居中。

總結一下，純CSS實現遮罩層是一種方便快捷的方法，不需要編寫額外的JavaScript代碼，在項目開發中使用非常方便。當然，如果需要一些高級特效，還是需要JS的幫助。