对话框是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;
}

如上述代码所示，我们可以使用类名来定义对话框的样式，包括对话框的位置、背景颜色、阴影、边框圆角、内边距、最大宽度等。除了基本样式外，我们还可以定义对话框中的标题、信息、操作按钮等，通过设置字体大小、行高等CSS属性来美化这些内容。

在实际应用中，我们可以使用JS等技术来动态创建对话框，并通过添加类名等方式来应用上述CSS样式，从而实现自定义的对话框样式。