没什么特别的这里。使用CSS，我们希望实际的复选框从屏幕上隐藏起来并且看不见。基本上所有样式都添加到标签中。这很方便，因为单击标签实际上会选中/取消选中该复选框。我们将使用以下CSS实现切换开关：.cmn-toggle{position:absolute;左边距：-9999px；可见性：隐藏；}.cmn-toggle+标签{显示：块；位置：相对；游标：指针；大纲：无；user-select:none;}Style1此时标签作为容器，有宽高。我们还给它一个背景颜色来模拟我们拨动开关的边框。:before元素模拟开关内部的浅灰色区域（当开关打开时，背景颜色会变为绿色）。:after元素是真正的圆形开关，它高于其他所有元素，点击时会从左向右滑动。我们将向:after元素添加一个框阴影，使其看起来更立体。当输入接受:checked伪类时，我们将平滑地更改:before元素的背景颜色和:after元素的位置。CSS如下：input.cmn-toggle-round+label{padding:2px;宽度：120px；高度：60px；背景色：#dddddd；border-radius:60px;}input.cmn-toggle-round+label:before,input.cmn-toggle-round+label:after{display:block;位置：绝对；顶部：1px；左：1px；底部：1px；内容：“”；}input.cmn-toggle-round+label:before{right:1px;背景色：#f1f1f1；边界半径：60px；过渡：背景0.4s;}input.cmn-toggle-round+label:after{width:58px;背景色：#fff；半径：100%；盒子阴影：02px5pxrgba(0,0,0,0.3);过渡：保证金0.4s;}input.cmn-toggle-round:checked+label:before{background-color:#8ce196;}input.cmn-toggle-round:checked+label:after{margin-left:60px;}样式2下面的例子和上面的例子非常相似，主要区别在于它的外观。符合现代网站流畅扁平化的趋势，但在功能上与例1相同。以下CSS仅更改切换的样式，其他一切保持不变。input.cmn-toggle-round-flat+label{padding:2px;宽度：120px；高度：60px；背景色：#dddddd；边框半径：60px；过渡：背景0.4秒；}input.cmn-toggle-round-flat+label:before,input.cmn-toggle-round-flat+label:after{display:block;位置：绝对；内容：“”；}input.cmn-toggle-round-flat+label:before{top:2px;左：2px；底部：2px；右：2px；背景色：#fff；边框半径：60px；过渡：背景0.4s；顶部：4px；左：4px；底部：4px；宽度：52px；背景色：#dddddd；边界半径：52px；过渡：边距0.4s，背景0.4s；checked+label{background-color:#8ce196;}input.cmn-toggle-round-flat:checked+label:after{margin-left:60px;background-color:#8ce196;}style3现在，我们要做一些事情这不再是一回事了。我们将创建一个切换式切换器。默认视图为灰色并显示“否”（或任何表示未选中），选中的视图为绿色并显示“是”。单击标签时，切换器将沿Y轴翻转180度。我们将使用“数据属性”来填充未检查/检查的内容。这些“data-attributes”在HTML中由“data-on”和“data-off”指定，它们将分别填充到两个伪元素：after和:before中。请注意：after伪元素中的backface-visiibility属性，由于起点是-180度，所以可以通过该属性隐藏背面的内容。input.cmn-toggle-yes-no+label{padding:2px;宽度：120px；高度：60px;}input.cmn-toggle-yes-no+label:before,input.cmn-toggle-yes-no+label:after{display:block;位置：绝对；顶部：0；左：0；底部：0；右：0；颜色：#fff；字体系列：“RobotoSlab”，衬线；字体大小：20px；-居中对齐;line-height:60px;}input.cmn-toggle-yes-no+label:before{background-color:#dddddd;内容：attr（数据关闭）；过渡：变换0.5s；可见性：隐藏；}input.cmn-toggle-yes-no+label:after{background-color:#8ce196;内容：属性（数据开启）；过渡：变换0.5s；变换：旋转Y（180度）；可见性：隐藏；}input.cmn-toggle-yes-no:checked+label:before{transform:rotateY(180deg);}input.cmn-toggle-yes-no:checked+label:after{transform:rotateY(0);}浏览器兼容性上面的浏览器兼容性要求是IE8及以下浏览器无法识别:checked伪类，所以需要检测浏览器，如果是老IE，则直接回退到原来的checkbox，csstransitions属性不支持IE9及以下浏览器，但这只影响过渡过程中的过渡部分，没有其他工作正常。总结下面是一些不错的CSS切换的示例！这种技术使一切完全语义复合，不添加任何疯狂的标记，并且可以用纯CSS完成。当然，你需要注意浏览器的兼容性，但是你可以使用条件样式来兼容旧的浏览器，使用上面提到的例子，不会有任何缺点。获取开关按钮代码可以：