居中显示：html,body,.checkbox,.checkbox.inner,.checkbox.inner.toggle{高度：100%；显示：弹性；对齐项目：居中；justify-content:center;}绘制外椭圆：.checkbox{width:10em;高度：5em；背景：线性渐变（银，白烟）；边界半径：2.5em；font-size:40px;}绘制内部椭圆：.checkbox.inner{width:8em;高度：3.5em；背景：线性渐变（dimgray，银色）；边界半径：2em；box-shadow:inset001.5emrgba(0,0,0,0.5);}画一个圆形按钮：.checkbox.inner.toggle{width:3.5em;高度：3.5em；背景：线性渐变（到顶部，银色，白色烟雾）；边界半径：50%；盒子阴影：00.4em0.6emrgba(0,0,0,0.2);位置：相对e;left:-30%;}为圆形按钮添加三维效果：.checkbox.inner.toggle::before{content:'';位置：绝对；高度：80%；宽度：80%；背景：线性渐变（白烟，银色）；border-radius:50%;}在按钮上写OFF，行高根据父元素的高度计算：.checkbox.inner.toggle::before{content:'OFF';文本对齐：居中；行高：计算（3.5em*0.8）；字体系列：无衬线；color:gray;}importjquery:编写一个脚本，在按钮出现时切换样式类点击：$(document).ready(function(){$('.toggle').click(function(){$('.inner').toggleClass('active');});});设置活动时控件的样式：.checkbox.inner.active{background:linear-gradient(green,limegreen);}.checkbox。inner.active.toggle{left:30%;}.checkbox.inner.active.toggle::before{content:'ON';color:limegreen;}最后为按钮设置缓动时间，实现动画效果checkbox。inner.toggle{transition:0.5s;}大功告成！知识点linear-gradient()https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradientbox-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowcalc()https://developer.mozilla.org/en-US/docs/Web/CSS/calc::beforehttps://developer.mozilla.org/en-US/docs/Web/CSS/::beforejquerytoggleClasshttp://api.jquery.com/toggleclass/