移动web之用CSS样式写如苹果手机的开关键

话说这个问题纠结了近一个小时，为什么呢？看看就知道了。

在公司的商旅Web移动版本项目上有这么一个交互，需要模仿iphone自带的开关，好吧，肯定没什么问题。

Tip：请使用Chrome查看以下案例

点此查看实例展示

写啊写，html代码出来了：

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

然后，写啊写，css代码也出来了，但是总会出现这样的问题：

原因：给外层写了overflow:hidden，但是没有把其内部截断，因为是圆角的，所以这个问题困扰了一会，后来发现这个问题在Firefox下是不存在，但这并不能解决此问题，因为这个是移动端项目，木有Firefox的事儿。

搜啊搜，找啊找，一个不错的方法解决了这个问题:-webkit-mask-image，在chrome下测试完美！

But，当上到iphone测试的时候这个问题却没有得到解决，so，可以肯定IOS5中的浏览器对-webkit-mask-image还没有做到好的支持。

继续搜索，这次我只相信英文了，搜索词是“webkit overflow hidden”，ok，第一个就是我想要的结果，查看。

看了看代码，很简洁，但似乎我的问题还是没有得到解决，随后又换个思路，把position给去掉试试，结果只有当把外层和内部元素的所有position属性给去除才得以解决。

结论：css 的position属性会给webkit核心浏览器的overflow照成失效。

好吧，之前的写法这里就不说了，因为大量用到css的position进行模块定位，导致外层overflow失效，鉴于此，更改写法，以下是css部分：

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

点此查看实例展示

嗯，问题解决，有更好方法的同学可以留言交流，移动web还是很好玩的。

爱创课堂-专业的前端HTML5培训机构

　爱创课堂秉承纯干货,不忽悠的态度专注前端培训,让每个零基础的学员都能真正的从入门到精通。

想要学习前端的朋友们可以点击“↑”上面的字哦

详询QQ2189877100

前端兴趣部落，欢迎关注

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有