CSS3手风琴的制作

效果如下
效果核心原理

• 利用表单的radio相同name只能选中一个作为效果开关.
• 利用伪类checked的检测选中状态并改变样式

我们来写代码吧~~~
首先写html的基本结构

<ul class="list">
		<li>
			<input type="radio" name="change" checked>
		</li>
		<li>
			<input type="radio" name="change">
		</li>
		<li>
			<input type="radio" name="change">
		</li>
		<li>
			<input type="radio" name="change">
		</li>
	</ul>
		<!--四个li里面分别有一个radio , 第一个元素默认选中-->

接下来写CSS样式

	body,
		input {
   
			margin: 0;
			padding: 0;
		}

		ul {
   
			margin: 0;
			list-style: none;
			padding-left: 0;
		}
		/*初始化代码,清除默认样式*/

接下来设置ul盒子的样式

	.list {
   
			width