眾所周知，聊天云是當今互聯網上最常見的交流方式之一。而CSS作為一種網頁樣式的表現語言，當然也能夠做出漂亮且實用的聊天云效果。

首先，我們需要一個聊天框架，最基本的HTML結構可以是這樣的：

<div class="chat-box">
<div class="chat-message">張三：你好啊</div>
<div class="chat-message my-message">我：你好啊！</div>
<div class="chat-message">李四：在忙什么呢？</div>
</div>

其中，class為chat-box的div是整個聊天框的外框，class為chat-message的div是對話框中的一條消息。這里我們為自己說的話添加了class為my-message，方便我們在CSS中使用。

接下來，我們利用CSS對聊天框進行樣式設置：

.chat-box {
border:1px solid #ccc;
border-radius:5px;
width:300px;
height:200px;
overflow-y:auto;
}
.chat-message {
padding:5px;
margin-bottom:5px;
background-color:#f7f7f7;
border-radius:5px;
}
.my-message {
background-color:#aef;
}

這段代碼為聊天框和消息設置了一些基本的樣式。例如，chat-message類設置了內邊距和下邊距，以及背景顏色和圓角。而my-message類則將自己的消息設為不同的背景色。

最后，我們還可以加上一些動態效果，比如當有新消息時，自動滾動到底部。可以使用JavaScript來實現這個效果：

var chatBox = document.querySelector('.chat-box');
chatBox.scrollTop = chatBox.scrollHeight;

這里通過查詢.chat-box類來獲取聊天框元素，并將scrollTop設置為scrollHeight，即讓聊天框自動滾動到底部。

通過以上的HTML、CSS和JavaScript代碼，我們可以輕松地制作出一個美觀且實用的聊天云效果。