CSS聊天氣泡框是在網(wǎng)頁設(shè)計中常用的一個元素，它可以用來展示聊天記錄、提示信息等內(nèi)容。下面我們來學(xué)習(xí)一下如何實(shí)現(xiàn)它。

/*HTML結(jié)構(gòu)*/
<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聊天氣泡框的代碼，其中我們使用了偽類和偽元素來實(shí)現(xiàn)左右兩側(cè)的氣泡形狀，并且通過加入不同的類名來區(qū)分是發(fā)送的消息還是接收的消息。通過對樣式的調(diào)整，我們可以很輕松地實(shí)現(xiàn)美觀的聊天氣泡框效果。