CSS遮罩層中間鏤空是一種很常見的效果，尤其在需要強調某個元素時，鏤空效果能夠起到很好的突出作用。下面我們就來介紹一下如何實現CSS遮罩層中間鏤空的效果。

首先，我們需要先搭建一個基礎的遮罩層。

.mask-layer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}

上述代碼實現了一個覆蓋整個屏幕的半透明黑色遮罩層。接下來，我們需要把遮罩層中間的部分鏤空出來，那么我們可以借助CSS3的屬性來實現。

.mask-layer:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: transparent;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
}

上述代碼在遮罩層上面增加了一個偽元素。這個偽元素的大小為200px x 200px，圓角為50%，并且設置了一個白色的描邊。再給這個偽元素加上一個大到無法想象的盒子陰影，這樣就可以實現中間區(qū)域的完全透明。我們可以根據需要對偽元素的大小、位置、邊框和陰影進行調整，來實現各種形狀的鏤空效果。

通過以上的介紹，你已經了解了如何實現CSS遮罩層中間鏤空的效果。希望本文介紹的內容能夠對你有所幫助。