CSS折叠手风琴是一种常见的网页设计元素，可以将大量的信息以收缩的方式呈现给用户，使得页面更加简洁、易读。CSS折叠手风琴通过使用CSS3的transition属性和伪类选择器实现，下面是一个例子：

<div > <div >Tab 1</div><div >内容1</div><div >Tab 2</div> <div >内容2</div> <div >Tab 3</div><div >内容3</div> </div>

以上代码表示一个折叠手风琴，由tab和panel两个元素组成，其中tab表示折叠面板的标题，panel表示折叠面板的内容。

接下来是CSS代码：

.accordion .tab {background-color: #eee;color: #444;cursor: pointer;padding: 18px;width: 100%;text-align: left;border: none;outline: none;font-size: 24px;transition: background-color 0.5s ease;}.accordion .panel {padding: 0 18px;background-color: white;overflow: hidden;transition: max-height 0.5s ease;font-size: 18px;}.accordion .tab.active, .accordion .tab:hover {background-color: #ccc;}.accordion .tab.active:after {content: '\002B';float: right;margin-left: 5px;}.accordion .tab:not(.active):after {content: '\2212';float: right;margin-left: 5px;}.accordion .panel.show {max-height: 500px;}

以上代码中，用到了CSS3中的transition属性，实现了面板的平滑展开和收缩效果。同时，通过伪类选择器和JavaScript实现了面板的状态切换效果。当tab元素被点击时，会添加一个active类，此时对应的panel元素会显示出来，并且panel元素的max-height属性被设置为实际高度值以展开折叠面板。

总结一下，CSS折叠手风琴是一种非常实用的网页设计元素，可以让页面更加简洁易读。其实现原理是通过CSS3的transition属性来实现面板的平滑展开和收缩效果，并利用伪类选择器和JavaScript来实现面板的状态切换效果。