居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#eee;}定义控件的样式，将控件设置为透明，使其不可见但仍可与用户交互。字体大小是一个变量，因为输入控件的字体大小与文本的字体大小不同，所以需要单独设置：body{font-size:var(--font-size);}：root{--font-size:16px;}.切换{位置：绝对；字体大小：var（--字体大小）；宽度：5em；高度：8em；保证金：0；过滤器：不透明度（0）；游标：指针；z-index:2;}设置开关的轮廓：.switch{position:absolute;宽度：5em；高度：8em；边界半径：1.2em；background:linear-gradient(#d2d4d6,white);}使switch三维带阴影：.switch{box-shadow:inset0-0.2em0.4emrgba(212,212,212,0.75),inset0-0.8em00.1emrgba(156,156,156,0.85),0000.1emrgba(116,116,116,0.8),00.6em0.6emrgba(41,41,41,0.3),0000.4em#d4d7d8;}使用伪元素设置开关文本，当前处于开关状态：.toggle~.switch::before,.toggle~.switch::after{position:absolute;宽度：100%；文本对齐：居中；字体大小：1.4em；字体系列：无衬线；;}.toggle~.switch::before{内容：'|';底部：1em；颜色：rgba(0,0,0,0.5);text-shadow:00.1em0rgba(255,255,255,0.8);}.toggle~.switch::after{content:'O';顶部：0.6em；颜色：rgba(0,0,0,0.45);text-shadow:00.1em0rgba(255,255,255,0.4);}设置input控件为checked状态，从而设置on状态的样式：设置开启状态的切换样式：.toggle:checked~.switch{background:linear-gradient(#a1a2a3,#f0f0f0);框阴影：插图00.2em0.4emrgba（212、205、199、0.75），插图00.8em00.1emrgba（255、255、255、0.77），0000.1emrgba（116、116，118,0.8),0-0.2em0.2emrgba(41,41,41,0.18),0000.4em#d4d7d8;}设置on状态下的文字样式：.toggle:checked~.switch::before{底部：0.3em;text-shadow:00.1em0rgba(255,255,255,0.5);}.toggle:checked~.switch::after{top:1.2em;text-shadow:00.1em0rgba(255,255,255,0.15);}接下来设置光照效果首先在关闭状态设置暗效果：.toggle~.light{width:100vw;高度：100vh；背景色：#0a0a16；z-索引：1；filter:opacity(0.7);}然后设置开启状态Lighteffect:.toggle:checked~.light{filter:opacity(0);}大功告成！