CSS如何做出對話效果？這是很多人都感興趣的問題。在本文中，我們將介紹如何使用CSS實現(xiàn)兩個人之間的對話框，其中一個人是左側(cè)對話框，另一個是右側(cè)對話框。

HTML結(jié)構(gòu)：

<div class="dialog">
<div class="left">
<div class="avatar"></div>
<div class="message">你好！</div>
</div>
<div class="right">
<div class="avatar"></div>
<div class="message">你好呀！</div>
</div>
</div>

首先，我們需要設(shè)置對話框的樣式。我們可以使用 flexbox 布局實現(xiàn)這個效果。左邊或右邊的樣式應該是一樣的，只是位置不同。

CSS樣式：

.dialog {
display: flex;
flex-wrap: wrap;
margin: 10px auto;
width: 400px;
background-color: #f2f2f2;
box-shadow: 0 0 5px #d3d3d3;
border-radius: 10px;
}
.left, .right {
width: 50%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 20px;
}
.left {
justify-content: flex-end;
}
.right {
justify-content: flex-start;
}

下一步是設(shè)置頭像的樣式。我們可以使用 border-radius 屬性來設(shè)置頭像的圓角。

CSS樣式：

.avatar {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 50%;
background-color: #f2f2f2;
box-shadow: 0 0 5px #d3d3d3;
}

現(xiàn)在是時候為消息框添加樣式了。我們可以使用 padding , background-color , border-radius 和 box-shadow 屬性來設(shè)置它們的樣式。

CSS樣式：

.message {
padding: 15px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 5px #d3d3d3;
word-wrap: break-word;
max-width: 70%;
}

最后，我們需要設(shè)置每個消息框之間的間距。我們可以在左側(cè)樣式中添加 margin-right 屬性，在右側(cè)樣式中添加 margin-left 屬性。

CSS樣式：

.left {
justify-content: flex-end;
margin-right: 20px;
}
.right {
justify-content: flex-start;
margin-left: 20px;
}

現(xiàn)在，我們完成了對話框的樣式。

這是一個簡單的例子，但是你可以使用這個基礎(chǔ)樣式添加更多的樣式，例如更改背景顏色或添加動畫效果。