CSS聊天氣泡框是在網頁設計中常用的一個元素，它可以用來展示聊天記錄、提示信息等內容。下面我們來學習一下如何實現它。

/*HTML結構*/
<div class="chatbox">
<div class="message-container">
<div class="message-bubble">
<p>這是一條聊天記錄</p>
</div>
</div>
</div>
/*CSS樣式*/
.chatbox {
width: 100%;
display: flex;
justify-content: center;
}
.message-container {
width: 60%;
}
.message-bubble {
background-color: #ffffff;
border: 1px solid #cfcfcf;
border-radius: 20px;
padding: 10px;
margin-bottom: 10px;
max-width: 70%;
}
.message-bubble p {
margin: 0;
font-size: 14px;
color: #333333;
}
.message-bubble::after {
content: "";
display: block;
clear: both;
}
.message-bubble.sent {
background-color: #dcf8c6;
}
.message-bubble.sent::after {
content: "";
display: block;
clear: both;
}
.message-bubble.sent p {
color: #333333;
}
.message-bubble.received::before {
content: "";
position: absolute;
top: 0;
left: -13px;
border-top: 13px solid transparent;
border-right: 13px solid #ffffff;
border-bottom: 13px solid transparent;
border-left: none;
}
.message-bubble.received {
background-color: #e6e6e6;
margin-left: 10px;
}
.message-bubble.received::after {
content: "";
display: block;
clear: both;
}
.message-bubble.received p {
color: #333333;
}

以上是CSS聊天氣泡框的代碼，其中我們使用了偽類和偽元素來實現左右兩側的氣泡形狀，并且通過加入不同的類名來區分是發送的消息還是接收的消息。通過對樣式的調整，我們可以很輕松地實現美觀的聊天氣泡框效果。