對話框是Web頁面中的一個非常重要的組件，它可以幫助我們在頁面中向用戶展示重要的信息、警告等。接下來，我們將介紹如何使用CSS來美化對話框。

.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 20px;
max-width: 500px;
width: 100%;
}
.dialog-header {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.dialog-message {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
}
.dialog-actions .button {
background-color: #0077FF;
color: #FFF;
padding: 10px 20px;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
.dialog-actions .button:first-child {
background-color: #CCC;
color: #000;
}

如上述代碼所示，我們可以使用類名來定義對話框的樣式，包括對話框的位置、背景顏色、陰影、邊框圓角、內(nèi)邊距、最大寬度等。除了基本樣式外，我們還可以定義對話框中的標題、信息、操作按鈕等，通過設(shè)置字體大小、行高等CSS屬性來美化這些內(nèi)容。

在實際應(yīng)用中，我們可以使用JS等技術(shù)來動態(tài)創(chuàng)建對話框，并通過添加類名等方式來應(yīng)用上述CSS樣式，從而實現(xiàn)自定義的對話框樣式。