遮罩層是我們在做頁面時經常會使用的一種技術，但有時候我們需要在遮罩層上開一些洞以便用戶可以點擊頁面下方的內容。這時，我們就可以用到CSS遮罩層開洞的技術。

首先，我們來看一下使用CSS制作遮罩層的代碼：

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

上面的代碼用一個div元素模擬了一個全屏遮罩層，并設置其z-index屬性為999，確保遮罩層在頁面上始終位于最頂層。

現在，我們要在遮罩層上開一個圓形洞，讓用戶可以看到下方的內容。為此，我們需要使用CSS3的clip-path屬性。下面是設置圓形洞的代碼：

.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
-webkit-clip-path: circle(50% at center);
clip-path: circle(50% at center);
}

上面的代碼將遮罩層的剪裁路徑設置為一個圓形，然后將這個圓形剪裁到了遮罩層上。其中，50%表示圓形的半徑，at center表示圓心位于遮罩層的中心。

如果我們想要在遮罩層上開一個矩形洞，該怎么做呢？可以用下面的代碼：

.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
-webkit-clip-path: polygon(0 0, 0 300px, 500px 300px, 500px 0);
clip-path: polygon(0 0, 0 300px, 500px 300px, 500px 0);
}

上面的代碼將遮罩層的剪裁路徑設置為一個四邊形，具體的點的坐標可以根據需求自行調整。

CSS遮罩層開洞的技術可以讓我們在不影響用戶操作的前提下，使頁面看起來更加美觀和實用。如果你想要實現更復雜的效果，可以閱讀相關的文檔并動手嘗試一下。