CSS聊天背景是在網頁開發中經常需要的一種樣式。它讓網頁看起來更加親切，使得用戶使用起來更加舒適。下面我們來介紹一下如何使用CSS來創建一款漂亮的聊天背景。

.chat-box{
background: #f0f0f0;
padding: 20px;
width: 90%;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.chat-box .message {
background: #e6e6e6;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
max-width: 50%;
float: left;
}
.chat-box .message.sent {
background: #dcf8c6;
float: right;
}

以上就是我們創建聊天背景的CSS代碼。在這段代碼中，我們創建了一個class為"chat-box"的div，這個div代表的就是我們要創建的聊天背景。我們設定了它的背景顏色為#f0f0f0，添加了一定的內邊距和圓角。同時我們還為背景添加了一個box-shadow效果，這個效果可以使背景看起來更加真實。

接下來我們為每一條聊天消息都創建了一個class為"message"的div。我們分別對發送和接收到的消息分別設定了一種顏色。發送的消息我們設定為綠色，接收到的消息設定為灰色。同時我們在這里也添加了一定的內邊距和圓角效果，讓整個聊天框看起來更加美觀舒適。

在使用這段代碼時，我們只需要將chat-box作為容器，然后在容器中添加多個message類的div即可。這樣就能夠輕松地創建出符合自己需求的聊天背景樣式。