您是否遇到過網頁中內容太長的問題，需要用戶不斷滾動才能看到全部內容。這時候，可以使用CSS折疊一半的效果，讓用戶可以在一個頁面上看到更多的內容。下面，讓我們來學習如何使用CSS實現這種效果。

/* HTML代碼 */
<div class="collapsible">
<p>這是需要折疊的內容，太長了...</p>
</div>

首先，在HTML中創建需要折疊的內容的容器。這里我們使用一個div標簽，并給它一個class名為collapsible。

/* CSS樣式 */
.collapsible {
overflow: hidden;
max-height: 50vh;
transition: max-height .5s ease-out;
}
.collapsible.open {
max-height: 1000vh;
transition: max-height .8s ease-in;
}

接下來，我們使用CSS來控制這個容器。首先，我們將overflow屬性設置為hidden，這樣可以隱藏超出容器范圍的內容。然后，將max-height屬性設置為50vh，這里vh表示視口高度的百分比。這樣，容器內容的最大高度將被限制在當前視口高度的50%以內。最后，我們添加一個過渡效果，讓內容的展開和關閉更加平滑。

如果想要展開或關閉這個容器，只需要在JavaScript中給它添加或移除一個open類，代碼如下：

// JavaScript代碼
let collapsible = document.querySelector('.collapsible');
collapsible.addEventListener('click', function() {
collapsible.classList.toggle('open');
});

這里使用addEventListener方法監聽collapsible的點擊事件，當用戶點擊容器時，將會給它添加或移除一個open類名，這樣就可以實現容器的展開或折疊了。

通過CSS折疊一半，我們可以更好地優化網頁的使用體驗，讓用戶更加方便地獲取需要的信息。當然，這只是CSS的一種應用方式，在實際開發中，還有很多有趣的CSS效果等待我們去探索。