< p>在制作網頁時，我們經常需要使用對話框來展示一些信息，那么如何通過 CSS 規則來設置對話框的方框呢？下面我們來詳細講解一下。< /p>
< p>首先，我們可以使用< pre>標簽來設置對話框的文字樣式，如下所示：< /p>

< pre>
.dialog {
font-family: Microsoft Yahei;
font-size: 14px;
color: #fff;
line-height: 24px;
margin: auto;
padding: 10px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #00aaff;
}
< /pre>
< p>上述代碼中，我們定義了一個名為“dialog”的樣式，其中 font-family 屬性用于設置字體類型，font-size 屬性用于設置字體大小，color 屬性用于設置字體顏色，line-height 屬性用于設置行高，margin 屬性用于對話框的位置居中，padding 屬性用于對話框內文字與邊框的間距，border 屬性用于設置邊框，border-radius 屬性用于設置邊框圓角，background-color 屬性用于設置對話框的背景顏色。< /p>
< p>如果您想要設置對話框的寬度和高度，則可以在上述樣式中添加 width 屬性和 height 屬性，如下所示：< /p>
< pre>
.dialog {
font-family: Microsoft Yahei;
font-size: 14px;
color: #fff;
line-height: 24px;
margin: auto;
padding: 10px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #00aaff;
width: 300px;
height: 200px;
}
< /pre>
< p>在上述代碼中，我們設置了對話框的寬度為 300px，高度為 200px。您可以根據需要自行修改其值。< /p>
< p>總之，通過以上 CSS 規則的設置，您可以輕松地制作出美觀、實用的對話框，提高網頁的交互性，為用戶帶來更好的使用體驗。< /p>