CSS手風琴是一種常用于網頁設計的效果，通過設置樣式實現內容區域的切換展示，類似于手風琴的折疊和展開。

實現手風琴效果的原理是利用CSS對元素的高度、寬度和透明度等屬性進行控制，以達到展開和折疊的目的。

以下是一段CSS手風琴的示例代碼：

/* 定義手風琴容器 */ 
.accordion {
border: 1px solid #ccc;
overflow: hidden;
}
/* 定義手風琴項 */ 
.accordion-item {
padding: 10px;
border-bottom: 1px solid #ccc;
background: #f2f2f2;
}
/* 定義手風琴項標題 */ 
.accordion-item__title {
padding: 10px;
font-weight: bold;
cursor: pointer;
}
/* 定義手風琴項內容 */ 
.accordion-item__content {
padding: 10px;
display: none;
}
/* 定義手風琴項標題展開時的樣式 */ 
.accordion-item__title.active {
background: #ccc;
}
/* 定義手風琴項內容展開時的樣式 */ 
.accordion-item__content.active {
display: block;
}