CSS中的收起效果可以讓網頁內容更加簡潔明了，讓用戶可以更快地獲取想要的信息。下面介紹兩種實現CSS中收起功能的方法。 第一種方法是利用CSS3中的checkbox和偽類實現收起和展開效果。具體代碼如下：

<style>
p {
max-height: 50px;
overflow: hidden;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
cursor: pointer;
display: block;
}
input[type="checkbox"] + label:before {
content: "+";
margin-right: 5px;
}
input[type="checkbox"]:checked + label:before {
content: "-";
}
input[type="checkbox"] ~ p {
max-height: none;
}
</style>
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<p>這是要收起的內容，可以根據需要設置最大高度。</p>

在代碼中，將要收起的內容放在p標簽中，設置最大高度和overflow:hidden，實現內容的隱藏。然后用label標簽和checkbox關聯起來，利用偽類:before來實現展開和收起符號的切換。最后，利用偽類 ~ 來選中與input相鄰的p標簽，做到根據checkbox選中狀態展開和收起效果。 第二種方法是使用JS實現。具體代碼如下：

<style>
p.collapsed {
max-height: 50px;
overflow: hidden;
}
button.toggle {
cursor: pointer;
}
</style>
<button class="toggle">展開/收起</button>
<p class="collapsed">這是要收起的內容，可以根據需要設置最大高度。</p>
<script>
let toggle = document.querySelector("button.toggle");
let content = document.querySelector("p.collapsed");
toggle.addEventListener("click", function() {
if(content.classList.contains("collapsed")) {
content.classList.remove("collapsed");
toggle.textContent = "收起";
} else {
content.classList.add("collapsed");
toggle.textContent = "展開";
}
});
</script>

在代碼中，同樣是將要收起的內容放在p標簽中。設定一個帶有最大高度的class為collapsed，然后使用JS來切換這個class。利用button標簽來觸發切換事件。 以上便是CSS中實現收起效果的兩種方法。根據實際情況選擇更適合的方法來實現收起效果。