纯CSS通过自定义样式，借助checkbox表单元素的:checked伪类实现switch开关效果的按钮。
为了便于修改和调节，使用了css变量--width、--height控制按钮的大小。
主要用到的css技术：
- css自定义变量，变量的获取和计算；
- flex布局；
position水平垂直居中；border-radius圆角；box-shadow内外阴影效果；transitionCSS动画中的过渡属性；transformCSS动画形变的缩放；::before伪元素和:checked伪类；
html元素结构
<label class="swith-indicate-label" style="--width:80;--height:40">
<input type="checkbox">
<span></span>
<i class="indicator"></i>
</label>CSS实现
body内的元素水平垂直居中，flex-direction为column垂直方向。
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background-color: #36d0f3;
}设置label鼠标cursor为小手，position: relative控制其内.indicator按钮开关的相对位置。隐藏其内默认的input。
.swith-indicate-label{
margin: 5px 0;
position: relative;
cursor: pointer;
}
.swith-indicate-label input{
/* appearance: none; */
display: none;
}span作为按钮的整体轮廓，其大小和设置的--width、--height相同；box-shadow设置很小的内层阴影；也可以根据需要改为其他背景和阴影颜色。
.swith-indicate-label span{
position: relative;
display: block;
width: calc(var(--width)*1px);
height: calc(var(--height)*1px);
border-radius: calc(var(--height)*1px);
background: #222;
box-shadow: inset 0 2px 15px rgba(0, 0, 0, .2),
inset 0 2px 2px rgba(0, 0, 0, .2),
inset 0 -2px 2px rgba(0, 0, 0, .2);
}
设置按钮开关.indicator，相对轮廓label的绝对位置，按钮为圆形；背景色简单的渐变；设置属性变化的过渡transition时间为0.5s；适当缩放将按钮放在轮廓内。
.swith-indicate-label .indicator{
position: absolute;
left: 0;
top: 0;
width: calc(var(--height)*1px);
height: calc(var(--height)*1px);
border-radius: 50%;
background: linear-gradient(to bottom, #555,#222);
box-shadow: 0 2px 5px rgba(0, 0, 0, .6),
inset 0 1px 2px rgba(255, 255, 255, .1);
transition: .5s;
transform: scale(.9);
}
也可以修改为其他背景色
background: rgba(255, 255, 255, .5);
添加点击checked选中/切换开关的效果，left移动按钮到轮廓label的最右边：
.swith-indicate-label input:checked ~ .indicator{
left: calc((var(--width) - var(--height))*1px);
}点击后左右切换开关
添加按钮中间的开关指示灯效果：居中的小圆点；背景色以及向外模糊的多层阴影。
.swith-indicate-label input ~ .indicator::before{
content: '';
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: 5px;
height: 5px;
border-radius: 50%;
transition: .5s;
background: #f00;
box-shadow: 0 0 2px #f00,
0 0 5px #f00,
0 0 10px #f00,
0 0 15px #f00,
0 0 20px #f00,
0 0 25px #f00,
0 0 30px #f00,
0 0 40px #f00;
}
添加选中/开关开启时的指示灯样式：修改背景色和向外模糊的多层阴影的颜色。
.swith-indicate-label input:checked ~ .indicator::before{
background: #0f0;
box-shadow: 0 0 2px #0f0,
0 0 5px #0f0,
0 0 10px #0f0,
0 0 15px #0f0,
0 0 20px #0f0,
0 0 25px #0f0,
0 0 30px #0f0,
0 0 40px #0f0;
}
扩展
还可以修改外层轮廓span的样式，使切换效果更加多变：
.swith-indicate-label input:checked ~ span{
box-shadow: 2px 2px 5px rgba(0, 255, 0, .5),
-2px -2px 5px rgba(0, 255, 0, .5),
2px -2px 5px rgba(0, 255, 0, .5),
-2px 2px 5px rgba(0, 255, 0, .5);
}
.swith-indicate-label input:checked ~ span{
background-color: rgba(0, 255, 0, .5);
}
CSS变量（CSS 自定义属性）
CSS变量介绍
css中通过变量名前添加两横线--声明变量；
body {
--foo: #7F583F;
--bar: #F7EFD2;
}CSS变量和标准的属性一样，只是没有默认含义。
各种css值都可以放入css变量中：
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}CSS变量的读取和简单计算
上面的示例可以看到，var()函数用于读取变量。var(--width)。
由于--height变量是数字，要转为像素，需要读取后执行calc计算为像素值：
width: calc(var(--height)*1px);var()第二个参数用来表示变量不存在时的默认值。
width: calc(var(--height,40)*1px);第一个参数后面的所有部分属于第二个参数，比如：
var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px 15px 20px);
字符串变量可以直接与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';如果变量是数值，要想应用到css的单位px、em、%中，需要使用calc()计算函数。
width: calc(var(--height)*1px);.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}变量值带有单位，是不能写成字符串的。
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo); }
CSS变量的作用域
同一个 CSS 变量，可以在多个选择器内声明。
CSS变量的作用域是其声明时所在的元素或选择器有效的范围内。优先使用内层变量。
全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。
:root这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root表示<html>元素，除了优先级更高之外，与html选择器相同。
