純CSS對話框是一個在前端開發中經常需要使用的組件，它通常被用來顯示重要的信息、提醒用戶某些操作、以及展示各種提示。本文將介紹如何使用純CSS創建一個簡單的對話框。

.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.dialog .title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.dialog .content {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.dialog .btns {
display: flex;
justify-content: flex-end;
}
.dialog .btns button {
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #0078d4;
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}

上面的代碼中，我們定義了一個.dialog的樣式，它是整個對話框的主體部分。我們使用了position: fixed來將對話框固定在屏幕上，使用top和left來將對話框居中，使用transform來微調居中效果。我們還設置了對話框的寬度和內邊距、背景顏色、圓角和陰影等屬性。

接下來，我們在對話框中添加了標題和內容，并為其設置了相應的樣式。我們使用了不同的字體大小和顏色來區分標題和內容，同時為內容設置了行高和下邊距，使得對話框看起來更加整潔。

最后，我們添加了一個按鈕區域，使用了display: flex來將按鈕區域中的按鈕排列在右側。我們給按鈕添加了背景色、圓角和光標樣式，并使用margin-left增加了按鈕間的間隔。

通過這個簡單的例子，我們可以看到使用 CSS 創建對話框是非常容易的，而且你可以根據自己的需要調整樣式和布局。如果你需要創建一個對話框，不妨試試這個方法吧！