CSS3是一種現代化的樣式表語言，它通過許多新屬性和選擇器來改善網頁的外觀和交互體驗。其中之一是遮罩層，本文將介紹如何使用CSS3編寫遮罩層。 首先，我們需要在HTML文檔中定義一個需要遮罩的元素。例如，可以創建一個帶有圖片的div元素。

<div class="mask-element">
<img src="image.jpg" alt="an image">
</div>

接下來，我們可以使用CSS3中的偽元素::before或::after來創建一個半透明的遮罩層覆蓋在div元素上。

.mask-element {
position: relative;
}
.mask-element::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們使用了position屬性來將div元素和遮罩層定位在相同的位置。我們還聲明了遮罩層的寬度和高度都是100%以覆蓋所有元素，背景顏色是黑色。 最后，我們可以通過調整遮罩層的opacity屬性來控制遮罩的透明度。

.mask-element::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.7;
}

在上面的代碼中，我們通過給rgba()函數的第四個參數設置一個0.7的值來創建了一個70%透明度的遮罩層。 總的來說，使用CSS3創建遮罩層非常簡單，只需要使用偽元素和屬性來覆蓋需要遮罩的元素就可以了。通過調整透明度，我們可以控制遮罩的強度和外觀，從而實現各種有趣的效果。