CSS 寫對(duì)話框樣式，是前端開發(fā)中比較常見的需求。下面，我們一起來學(xué)習(xí) CSS 如何寫對(duì)話框樣式。

.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;
}

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

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

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

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

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