CSS 寫對話框樣式，是前端開發中比較常見的需求。下面，我們一起來學習 CSS 如何寫對話框樣式。

.dialog {
width: 400px;
height: 200px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
padding: 20px;
}

以上代碼，定義了一個彈出對話框的樣式。其中，width和height分別指定了對話框的寬度和高度；background-color指定了對話框的背景顏色；border-radius控制了對話框的圓角樣式；box-shadow添加了一個陰影效果；position屬性為absolute，使對話框在頁面中居中顯示；z-index控制對話框的層級，使其始終處于最前面；padding指定了對話框內部的內邊距，增加了內部空間。

.dialog .title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}

以上代碼，定義了對話框標題的樣式。其中，font-size和font-weight控制了標題的字體大小和粗細；color控制了標題的顏色；margin-bottom指定了標題與對話框內容之間的下邊距。

.dialog .content {
font-size: 16px;
color: #666;
}

以上代碼，定義了對話框內容的樣式。其中，font-size控制了內容的字體大小；color控制了內容的顏色。