本篇内容介绍了“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式开关怎么写”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。