CSS3 iphone式开关的推荐写法

<span class="onoff"><label><i></i></label></span>

.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;
}

http://www.daqianduan.com/4548.html