CSS3是Web開發中不可或缺的一部分，其中展開和收縮的效果在現代Web設計中非常流行。通過使用CSS3的一些特性，我們可以在網站上實現美觀的展開和收縮效果。

/* 實現展開和收縮的效果 */
.collapsible {
border: 1px solid #ddd;
background-color: #f1f1f1;
cursor: pointer;
padding: 15px;
width: 100%;
text-align: left;
outline: none;
font-size: 18px;
}
/* 更改默認展開和收縮的圖標 */
.collapsible:before {
content: ' ';
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border: 2px solid #555;
border-top: none;
border-right: none;
transform: rotate(45deg);
}
/* 當元素被展開時，更改圖標 */
.active:before {
transform: rotate(-135deg);
}
/* 初始狀態下折疊內容 */
.content {
display: none;
overflow: hidden;
padding: 0 15px;
background-color: white;
}

上述代碼是一個使用CSS3實現的展開和收縮的效果，當用戶點擊.collapsible元素時，.content元素將展開或收縮。通過更改.collapsible元素前面的偽元素，我們可以自定義元素的圖標。

具體實現可通過JavaScript的事件監聽器來完成，單擊.collapsible元素時會觸發一個事件，并使.content元素顯示或隱藏。

CSS3 展開和收縮的效果為網站帶來了更多的交互性和美觀性。在設計Web應用程序時，重要的是要使用戶界面易于使用和導航。使用CSS3 展開和收縮效果，可以更好地組織和顯示Web內容。