<div class="mask">是一個常見的HTML和CSS中的類名，被廣泛用于網頁設計和開發中。它通常被用來創建一個遮罩層，以實現一些特定的效果或功能。在這篇文章中，我們將詳細介紹使用<div class="mask">的幾個代碼案例，幫助讀者更好地理解和應用它。
第一個案例是創建一個簡單的遮罩層。我們可以使用如下代碼來實現：

<code>
<p>html:</p>
<p><div class="mask"></div></p>
<br>
    <p>css:</p>
<p>.mask {</p>
<p>    background-color: rgba(0, 0, 0, 0.5);</p>
<p>    width: 100%;</p>
<p>    height: 100%;</p>
<p>    position: fixed;</p>
<p>    top: 0;</p>
<p>    left: 0;</p>
<p>}</p>
</code>

在這個例子中，我們給<div>元素添加了一個名為"mask"的類名，并使用CSS樣式定義了這個類的屬性。通過設置背景顏色為rgba(0, 0, 0, 0.5)，我們創建了一個半透明的黑色遮罩層。同時，設置了寬度和高度為100%，使遮罩層覆蓋整個頁面。通過設置position為fixed，遮罩層將會始終固定在頁面上，并使用top和left屬性將其定位在頁面左上角。
第二個案例是使用<div class="mask">來實現一個全屏模態框。我們可以通過下面的代碼實現：

<code>
<p>html:</p>
<p><div class="mask"></div></p>
<p><div class="modal">This is a modal box.</div></p>
<br>
    <p>css:</p>
<p>.mask {</p>
<p>    background-color: rgba(0, 0, 0, 0.5);</p>
<p>    width: 100%;</p>
<p>    height: 100%;</p>
<p>    position: fixed;</p>
<p>    top: 0;</p>
<p>    left: 0;</p>
<p>}</p>
<br>
    <p>.modal {</p>
<p>    background-color: #fff;</p>
<p>    width: 400px;</p>
<p>    height: 200px;</p>
<p>    position: fixed;</p>
<p>    top: 50%;</p>
<p>    left: 50%;</p>
<p>    transform: translate(-50%, -50%);</p>
<p>}</p>
</code>

在這個例子中，我們在遮罩層下方添加了一個名為"modal"的<div>元素，并設定其內容為"This is a modal box."。通過設置背景顏色為白色，我們創建了一個白色的模態框。設置模態框的寬度為400px，高度為200px，并通過position屬性將其固定在頁面上。通過將top和left屬性設置為50%，再利用transform屬性的translate函數將其居中定位。
通過以上兩個案例，我們可以看到<div class="mask">的靈活性和可用性。除了上述例子中的應用，我們還可以利用它實現其他效果，如點擊遮罩層隱藏特定元素、攔截用戶操作并彈出警告框等。希望本文對讀者有所幫助，并能在實際項目中靈活應用<div class="mask">這個類名。