css3回顾 checkbox

<div class="checkBox">
  <input type="checkbox" id="check1">
  <label for="check1"></label>
</div>

*{
  padding:;
  margin:;
}
.checkBox{
  width:20px;
  margin:20px;
  position:relative;
}
.checkBox label{
  position:absolute;
  left:;
  top:;
  width:20px;
  height:20px;
  cursor:pointer;
  background:linear-gradient(to top,# %,#45484d %);
  border-radius:4px;
  box-shadow: inset 0px 1px 1px rgba(,,,0.5), 0px 1px 0px rgba(,,,.);
}
.checkBox label:after{
  position:absolute;
  top:4px;
  left:4px;
  content:'';
  width:9px;
  height:5px;
  background:transparent;
  border:3px solid #fcfff4;
  transform:rotate(-45deg);
  border-top:;
  border-right:;
  opacity:;
}

input[type=checkbox]:checked +label:after{
  opacity:;
}

<div class="checkbox2">
  <input type="checkbox" id="check2">
  <label for="check2"></label>
</div>

.checkbox2{
  width:80px;
  height:26px;
  background:#;
  margin:20px;
  position:relative;
  border-radius:50px;
  box-shadow:inset 0px 1px 1px rgba(,,,0.4),0px 1px 0px rgba(,,,0.2);
}
.checkbox2:after{
  content:'OFF';
  color:#;
  position:absolute;
  right:10px;
  z-index:;
  font-size:12px;
  line-height:26px;
  text-shadow:1px 1px 0px rgba(,,,.);
}
.checkbox2:before{
  content:'ON';
  color:#27ae60;
  position:absolute;
  left:10px;
  z-index:;
  font-size:12px;
  line-height:26px;
}
.checkbox2 label{
  display:block;
  width:34px;
  height:20px;
  cursor:pointer;
  position:absolute;
  top:3px;
  left:3px;
  z-index:;
  background:#fcfff4;
  background: linear-gradient(top, #fcfff4 %, #dfe5d7 %, #b3bead %);
  border-radius: 50px;
  box-shadow: 0px 2px 5px 0px rgba(,,,0.3);
  trnasition:all .4s ease;
}
.checkbox2 input[type=checkbox]{
  visibility:hidden;
}
.checkbox2 input[type=checkbox]:checked +label{
  left:43px;
}