|
话说这个问题纠结了近一个小时，为什么呢？看看就知道了。 在公司的商旅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式开关的推荐写法 |
|
|
