CSS3 iphone式开关怎么写

本篇内容介绍了“CSS3 iphone式开关怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

html代码：

<span  class = “ onoff” > <标签> <i > </ i > </ label > </ span >

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

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

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

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

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

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

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

好吧，之前的写法这里就不说了，因为大量用到css的位置进行模块定位，导致外层溢出无法重复，因此此，更改写法，以下是css部分：

。onoff {

溢出：隐藏; 

显示：inline-block ; 

边距：0  0  -5px  15px ; 

宽度：60px ; 高度：20px ; 

border-radius：20px ; 

边框：实心 1px  ＃999；

} 

。开关 标签{

显示：块; 

左边距：-40px ; 

宽度：100px ; 高度：20px ; 

text-align：right ; 颜色：＃8B8B8B ; border-radius：20px ; 

背景：-webkit梯度（线性，左 顶，左 底，颜色-停止（0，#DFDFDF ），颜色-停止（1，#FEFEFE ）） ; 

} 

。开关 标签::在{

位置之后：亲戚; 左：-17px ; 顶部：-20px ; 

显示：inline-block ; 

内容：'' ; 宽度：6px ; 高度：6px ; 

边框：实心 2px  ＃999；

border-radius：10px ; 

} 

。ONOFF 我{

显示：块; 

宽度：60px ; 高度：20px ; 

border-radius：20px ; 

背景：-webkit梯度（线性，左 顶，左 底，颜色-停止（0，＃FE7D00 ），颜色-停止（1，＃FEA753 ）） ; 

} 

。ONOFF 我::之前{

位置：相对; 顶部：-7px ; 左：-15px ; 

显示：内联块; 

内容：'' ; 宽度：2px ; 高度：10px ; 

背景颜色：#fff ; 

} 

。ONOFF 我::后{

位置：相对; 顶部：-1px ; 左：1px ; 

显示：inline-block ; 

内容：'' ; 宽度：20px ; 高度：20像素; 

边框：实心 1px  ＃999；

border-radius：50px ; 

背景：-webkit梯度（线性，左 顶，左 底，颜色-停止（0，#DADADA ），颜色-停止（1，#FAFAFA ）） ; 

box-shadow：嵌入 0  0  1px  #fff ; 

“CSS3 iphone式开关怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！