在設計網站頁面時，我們經常需要在一個固定區域內顯示大量內容。如果一股腦地把所有內容全部顯示在頁面上，這樣的效果會顯得非常擁擠，影響到用戶的閱讀體驗。這時候，我們需要使用CSS樣式來實現“顯示更多內容”這樣的交互效果。

比如，在一個新聞列表頁面中，如果我們只顯示前10篇文章，同時在頁面底部添加一個“顯示更多”按鈕，用戶點擊后就可以展開更多文章。這樣可以使得頁面看起來更簡潔，也方便用戶選擇自己感興趣的文章。

.news-list {
height: 200px;
overflow: hidden;
}
.news-list.expand {
height: auto;
}
.show-more-button {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
}

以上是一段簡單的CSS代碼，用于實現新聞列表頁面的“顯示更多”效果。首先，我們設置了一個.news-list的固定高度，并設置了overflow:hidden屬性，表示內容超出高度范圍時會被隱藏。然后，在展開更多內容時，我們給該元素添加了一個.expand類，這時候高度就會根據內容自動調整。

最后，我們添加了一個“顯示更多”按鈕。該按鈕的樣式可以自由調整，這里只是一個簡單的例子。當用戶點擊該按鈕時，我們使用JavaScript代碼為.news-list元素添加.expand類，從而實現“展開全部內容”的效果。

總的來說，CSS樣式可以為網站頁面提供很多豐富的交互效果，而“顯示更多內容”只是其中的一個例子。我們可以根據具體的需求自由組合各種CSS屬性和JavaScript代碼，實現更加復雜和豐富的效果。