纯css3实现美化复选框和手风琴效果（详细）

关键技术点和原理：

原理就是把 checkbox或 radio 给隐藏掉   ，然后给选框 绑定一个label标签。

然后用label标签作为容器，在里面放一个：before或一个after

用before模拟选框的框，用after来模拟选框的填充

通过

.magic-checkbox:checked + label:after {/*选框被选中时  显示after填充*/
  display: block;
  }

 来确定是否选中复选框，如果checked就把after的显示。

 先贴出html的代码

<div id="main">
    <div class="demo">
        <div class="col">
          <h4>Checkbox(复选按钮)</h4>
            
            <div class="opt">
                <input class="magic-checkbox" type="checkbox" name="layout" id="c1">
                <label for="c1">Normal</label>
            </div>
            <div class="opt">
                <input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked>
                <label for="c2">Checked</label>
            </div>
            <div class="opt">
                <input class="magic-checkbox" type="checkbox" name="layout" id="c3" value