移动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还是很好玩的。
爱创课堂秉承纯干货,不忽悠的态度专注前端培训,让每个零基础的学员都能真正的从入门到精通。
想要学习前端的朋友们可以点击“↑”上面的字哦
详询QQ2189877100
前端兴趣部落,欢迎关注
移动web之用CSS样式写如苹果手机的开关键的更多相关文章
- 正确分析结构使用正确的HTML标签。CSS样式写一起。
在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS样式写在JSP代码中的几种方法
1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- css样式写一个三角形
<style> .test{ border-color:transparent #abcdef transparent transparent; border-style:solid; b ...
- 用CSS样式写选择框右侧小三角
直接上代码! <!DOCTYPE html><html lang="en"><head> <title>小三角</title& ...
- 纯CSS样式写刘海屏效果
1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 嵌入式css样式,写在当前的文件中
现在有一任务,把下面的“超酷的互联网”.“服务及时贴心”.“有趣易学”这三个短词文字字号修改为18px. 如果用内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签 ...
- Web前端基础——CSS
一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...
随机推荐
- eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...
- SQL语句来查询今天、昨天、7天内、30天的数据,经典!
---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...
- iOS 真机调试不能连接网络的排错过程
开发环境: macOS 10.12.1 Xcode 8.1 Qt 5.8 gSOAP 2.8 iPhone 6S+iOS 10.1.1 问题: 使用 Qt Quick 写了一个跨平台的应用,在Wi ...
- MVC:The name 'Scripts' does not exist in the current context
汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 解决:在View下面的Web.Config的namespaces添加 <add n ...
- 将 instance 连接到 first_local_net - 每天5分钟玩转 OpenStack(82)
上一节 first_local_net 已经就绪,下面创建 instance 并将其连接到该网络. 将 instance 连接到 first_local_net launch 一个 instance, ...
- QuickContactBadge去掉三角
我们首先来分析一下QuickContactBadge源码 在QuickContactBadge构造函数中会给mOverlay赋值 private Drawable mOverlay; public Q ...
- 我的Objective-C系列文章
做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...
- iOS开发之抽屉效果实现
说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,今天的博客中用CocoaPods引入PPR ...
- 从一道面试题分析javascript闭包
据说是一不注意就会做错的五道javascript面试题之一,我们来看看这道题长什么样 function Container( properties ) { var objthis = this; fo ...
- SQLServer 2012重启服务后,自增1的标识列一次增长了1000左右
sql2012我重启了下sql服务,然后自增列Id居然一下子跳了1000,怎么回事啊? 如果第一条数据是1,我重启服务,再添加就是1001,如果继续添加不重启服务的话就是1002,如果再次重启的话 ...