CSS扣扣聊天氣泡，是指在頁面上實(shí)現(xiàn)類似QQ聊天框中發(fā)送消息的小氣泡效果，這種效果可以增強(qiáng)網(wǎng)站的交互性。CSS的選擇器和一些屬性，讓我們可以實(shí)現(xiàn)這個很酷的效果。

.chat-bubble {
position: relative;
}
.chat-bubble:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: 5px;
top: 50%;
margin-top: -10px;
border: 10px solid transparent;
border-right: 10px solid #ededed;
z-index: -1;
}
.chat-bubble p {
position: relative;
margin: 0;
padding: 10px;
border-radius: 5px;
background-color: #ededed;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
word-wrap: break-word;
}
.chat-bubble.right:before {
left: auto;
right: 5px;
border-right: none;
border-left: 10px solid #f5f5f5;
}
.chat-bubble.right p {
background-color: #f5f5f5;
float: right;
}

上述代碼中，我們首先定義了一個聊天氣泡的類名為chat-bubble，并設(shè)置其為相對定位。接著，通過偽元素before添加一個右下角向右的三角形，來呈現(xiàn)氣泡的形狀。為了達(dá)到三角形的效果，我們使用透明的邊框來制造邊角的效果，同時將其中一個方向的邊框樣式改為實(shí)線，使其成為一個三角形，并將z-index設(shè)為-1使其位于氣泡之后，避免遮蓋。

然后，我們設(shè)置氣泡內(nèi)的文本樣式，包括內(nèi)邊距、邊框樣式、背景顏色、圓角、文本換行等。其中，使用box-shadow創(chuàng)建一個輕微的立體感。對于右側(cè)的氣泡，我們需要調(diào)整三角形的位置為右下角向左，并且氣泡文本位置設(shè)為float: right，同時修改背景顏色。以上就是一個簡單的CSS扣扣聊天氣泡效果，可以根據(jù)需要進(jìn)行調(diào)整和擴(kuò)展。