CSS是前端開發中非常重要的一部分，它可以幫助我們實現各種各樣的效果。今天我們要學習的是如何使用CSS來實現收縮功能。

首先，我們需要使用display: none;屬性來隱藏需要收縮的內容。但是，這樣的話我們無法通過點擊按鈕來展開內容。因此，我們需要配合display: none;使用display: block;屬性來實現。

下面是一個簡單的例子：

<button onclick="toggleContent()">點擊展開/收縮</button>
<div id="content">
<p>這是要收縮的內容</p>
</div>
<style>
#content {
display: none;
}
.show {
display: block;
}
</style>
<script>
function toggleContent() {
var content = document.getElementById("content");
if (content.classList.contains("show")) {
content.classList.remove("show");
} else {
content.classList.add("show");
}
}
</script>

在上面的代碼中，我們首先將要收縮的內容隱藏起來。然后，當我們點擊按鈕時，會執行toggleContent()函數。這個函數會首先獲取到需要收縮的內容，然后判斷它是否已經處于顯示狀態。如果是，就將其隱藏；如果不是，就將其顯示。這里我們使用了classList來添加和移除show類，從而控制內容的顯示和隱藏。

最后，我們只需要在CSS中設置#content.show的樣式，就能控制內容的展開和收縮了。

以上就是CSS實現收縮功能的方法，希望對大家有所幫助！