在網頁制作中，遮罩（mask）效果是一種非常常見的效果，可以用于圖片展示、文字滾動等場景中，那么如何使用 CSS 來實現遮罩效果呢？下面我們來一步步介紹。

首先我們需要使用 CSS 中的屬性 clip-path。clip-path 屬性可以創建一個通過裁剪顯示區域來實現可見性的區域。

.mask {
background-image: url("xxx.jpg");
-webkit-clip-path: circle(50%, 50%, 50%);
clip-path: circle(50%, 50%, 50%);
}

上面的代碼中，我們給需要添加遮罩效果的元素添加了一個類名 .mask，然后為其設置了一張背景圖 xxx.jpg，并使用 clip-path 屬性創建了一個圓形區域，大小為元素自身的一半。

如果我們想要創建其他形狀的遮罩效果，可以使用 clip-path 屬性提供的其他功能，比如 polygon、ellipse 等等。比如如下代碼創建一個菱形區域：

.mask {
background-image: url("xxx.jpg");
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

除了使用 clip-path 屬性，我們還可以使用 opacity 屬性來創建遮罩效果。opacity 屬性可以設置元素的不透明度，從而實現遮罩效果。比如如下代碼實現了一個半透明遮罩：

.mask {
background-image: url("xxx.jpg");
opacity: 0.5;
}

以上就是使用 CSS 實現遮罩效果的方法，通過 clip-path 屬性和 opacity 屬性我們可以創建出各種形狀、透明度的遮罩效果，為網頁制作提供了更多的可能性。