CSS3收起展開是網頁開發中常用的一種效果，通過CSS3（Cascading Style Sheets 3）的特定屬性和方法，可以實現元素的可見性和尺寸的變化，以達到隱藏和顯示元素的效果。下面我們來詳細了解一下如何使用CSS3來實現文本內容的收起和展開。

首先，我們需要使用一個包含文本的HTML元素，比如一個段落

<p> </p>

。然后，在CSS文件中定義該元素的樣式，如字體大小、顏色等屬性。接下來，為了達到收起展開的效果，我們需要使用CSS3的一些新特性，如height、overflow和transition等屬性。

先來看height屬性，它可以控制元素的高度。我們可以定義一個默認高度和一個較小的高度，當需要收起元素時，修改元素的高度為較小值，當需要展開元素時，修改元素的高度為默認值。

// 定義默認高度和過渡效果
p {
height: auto; /* 默認高度 */
overflow: hidden; /* 內容超出高度時隱藏 */
transition: height 0.5s ease-in-out; /* 過渡動畫效果 */
}
// 定義收起狀態下的高度
p.collapsed {
height: 50px; /* 較小高度 */
}

上面的代碼中，height屬性的值可以是具體數值，也可以是auto（自適應高度）。overflow:hidden屬性可以讓元素的內容超出高度時自動隱藏。transition屬性定義一個過渡動畫效果，讓元素的高度變化更加平滑自然。當添加collapsed類名時，元素將變為收起狀態，高度為50px。

我們還需要添加一個控制開關，讓用戶可以主動控制元素的狀態。可以使用JavaScript來實現，也可以使用純CSS來實現，添加一個容器元素和一個復選框，用偽類實現狀態切換：

// 定義容器元素和復選框
<div class="switch">
<p>文本內容...</p>
<input type="checkbox" id="switcher">
<label for="switcher">收起/展開</label>
</div>
// 定義偽類
/* 復選框未選中（默認狀態） */
.switch>:not(:checked) + label + p {
height: auto; /* 自適應高度 */
}
/* 復選框選中（收起狀態） */
.switch>:checked + label + p {
height: 50px; /* 固定高度 */
}

代碼中使用了:not和:checked偽類，它們分別表示元素未被選中和已被選中。在未被選中時，文本元素的高度自適應；在被選中時，文本元素的高度固定為50px，達到收起狀態。

以上就是實現文本內容收起展開效果的方法，通過使用CSS3的height、overflow和transition等屬性，以及容器元素和偽類控制方式，可以對網頁中的內容進行優化和美化。