简易switch开关【css】

今天在用el-switch的时候遇到点小问题，然后想着自己写一个css的吧。

其实写过不知几回了，纯当记录一下。

结合switch开关的样子，其实用css实现挺简单的。

原理：

1. 相邻兄弟选择器+伪类选择器的作用
2. chebox和label

先分两个步骤：

一、先画外观

如果只是单纯画一个开和一个关：

  <div for="switcher-check" class="switcher-layer">
    <span class="switcher-point"></span>
  </div>

那只要每一个只需要：一个椭圆外壳加一个内部小圈圈，改变一下颜色，调整一下小圈圈在内部的左边距，开和关就出来了。

比如，赋予上面元素这样的css，就出来一个关按钮了。

.switcher-layer{
  cursor: pointer;
  width: 80px;
  height: 40px;
  display: block;
  border-radius: 20px;
  background-color: #aaa;
}
.switcher-point{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-color: white;
  border-radius: 50px;