话说这个问题纠结了近一个小时，为什么呢？看看就知道了。
在公司的商旅Web移动版本项目上有这么一个交互，需要模仿iphone自带的开关，好吧，肯定没什么问题。
Tip：请使用Chrome查看以下案例
点此查看实例展示 写啊写，代码出来了：
.onoff{ overflow: hidden; display: inline-block; margin:0 0 -5px 15px; width: 60px;height:20px; border-radius: 20px; border: solid 1px #999;}
.onoff label{ display: block; margin-left: -40px; width: 100px;height: 20px; text-align: right;color: #8B8B8B;border-radius:20px; background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DFDFDF),color-stop(1,#FEFEFE));}
.onoff label::after{ position: relative;left:-17px;top: -20px; display: inline-block; content: '';width: 6px;height: 6px; border: solid 2px #999; border-radius: 10px;}.onoff i{ display: block; width: 60px;height: 20px; border-radius:20px; background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FE7D00),color-stop(1,#FEA753));}.onoff i::before{ position: relative;top: -7px;left:-15px; display: inline-block; content: '';width: 2px;height: 10px; background-color: #fff;}.onoff i::after{ position: relative;top: -1px;left:1px; display: inline-block; content: '';width: 20px;height: 20px; border: solid 1px #999; border-radius: 50px; background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DADADA),color-stop(1,#FAFAFA)); box-shadow: inset 0 0 1px #fff;}
点此查看实例展示 本文转载自：
大前端 ?
CSS3 iphone式开关的推荐写法
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
