温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3 iphone式开关怎么写

发布时间:2022-03-09 15:37:28 来源:亿速云 阅读:127 作者:iii 栏目:web开发

本篇内容介绍了“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式开关怎么写”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI