【使用border-image实现类似iOS7的1px底边】的更多相关文章

使用border-image实现类似iOS7的1px底边

使用border-image实现类似iOS7的1px底边 iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的. 首先,来看下面iOS设置的截图中的border: 从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线.这篇文章将说明如何使用border-image实现iOS7的border效果. 在看下面的内容之前,需要先了解devicePixelRatio和border-image,不熟悉的同学请自行脑补: 设备像素比devi…

html5手机常见问题与工具分享

mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备参数速查 浏览器兼容表 移动设备查询器 移动设备适配库 移动设备适配库2 viewport与设备尺寸在线检测器 html5 移动端兼容性速查 在线转换字体 c…

mobileTech

A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备参数速查 浏览器兼容表 移动设备查询器 移动设备适配库 viewport与设备尺寸在线检测器 html5 移动端兼容性速查 在线转换字体 css3 选择器测试 兼容性速查表 浏览器…

（任寒韬）WebApp群主 - MobileTech 资料

web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/master/README.md mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack…

mobilehack -转

# mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇妙的hack](http://browserhacks.com/ "各种奇妙的hack") [几乎所有设备的屏幕尺寸与像素密度表](http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density "几乎所有设备的屏幕尺…

H5填坑笔记--持续更新

最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在iOS中,默认情况下键盘是开启首字母大写的功能的,如果业务不想出现首字母大写,可以这样: <input type="text" autocapitalize="off" /> 二.iOS输入框默认内阴影和样式问题 在iOS上,输入框默认有内部阴影,但无法使用…

移动web 1像素边框

实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边>,缺点是,你需要制作图片,圆角的时候会出现模糊. .border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAE…

移动Web解决方案的链接收藏

信息类 html5 浏览器兼容性查询 - 浏览器内建对象文档 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 stackoverflow 最靠谱的问题解决方案 github 开源代码网站 全球最大规模的代码库 commonjs规范 javascript教程 nodejs HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备参数速查 浏览器兼容表 移动设备查询器 移动设备适配库 移动设备适配库2 viewport与…

1px渲染成2px的场景及解决方案

1.场景一: IE6 下默认div最小高度为2px,如何创建高为1px的容器? .minContainer{font-size:0px;overflow:hidden}   2.场景二: 移动端高分辨率下,将1px border 渲染成2px 解决方案(1) <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/> 然后通过rem进行布局…

border三角形

border:100px solid ; box-shadow: inset 0 1px,inset 1px 0px,inset 0 -1px,inset -1px 0px; width:0px; height: 0px; margin:0 auto; /*transparent 透明*/ border-color:red transparent transparent transparent; /*box-shadow 向框添加一个或多个阴影*/box-shadow: inset 0 1px,…

CSS中border和outline的区别

border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline-color:#ccc; 可以简写为:outline:1ox solid #ccc; 2者的用法相似,但是border是会占据盒子模型的大小,而outline是一个轮廓,不会占据盒子模型的大小.…

移动端1px细线解决方案总结

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="…

border 边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>边框</title> <style> /*div{ width: 200px; height: 200px;*/ /*border-color: red; border-width: 10px; border-style: solid;*//*s…

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

webapp：移动端高清、多屏适配方案（zz）

来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清…

解惑好文：移动端H5页面高清多屏适配方案 (转)

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).…

移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍…

【转】UINavigationBar 使用总结

原文网址:http://www.jianshu.com/p/f0d3df54baa6 UINavigationBar是我们在开发过程中经常要用到的一个控件,下面我会为大家介绍一些常用的用法. 1. 设置导航栏的标题 这个不多说,直接上代码self.navigationItem.title = @"UINavigationBar使用总结"; 2. 设置导航栏的背景颜色 //通过barTintColor来设置背景色 self.navigationController.navigationB…

[转]:移动端H5页面高清多屏适配方案

原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果…

移动端适配方案以及rem和px之间的转换

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

本地图片上传与H5适配知识

最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { url = window.URL.createObjectURL(f…

移动端web及app设计尺寸

转载 2017年07月27日 22:48:16 984 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布…

解惑好文：移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

移动端，多屏幕尺寸高清屏retina屏适配的解决方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i…

你真的了解FastClick吗？

你真的了解FastClick吗? 前段时间在做公司官网手机端菜单部分的时候,遇到一些很诡异的点击问题.比如菜单点击无效/双击才有效.在手指滑动的时候会触发点击事件.以及同样的事件处理在微信跟浏览器会有不一样的表现等等,这些问题我一直试图用一些移动端事件的hack来解决,到最后还是有两个问题没有解决掉.后来意识到可能是引入的插件导致的事件冲突引起,因为一直都在全局引入了fastclick,以及最初偷懒引入的一个菜单功能插件(插件中有引入iScroll).经过排查最后得出结论是fastclick与插…

初学Less

使用Less Server-side usage npm安装 命令行使用 在代码中使用 Client-side usage 语言特性 Variables Mixins Nested Rules Operations Escaping Functions Namespaces and Accessors Scope Comments Importing 参考 Less在CSS语法的基础上进行了扩展,主要包含: Variables(变量) Mixins(混合书写) Nested Rules(嵌套规则…

弹层组件-layer

layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上任意版本,和laye.js 通过简单的例子能加深理解和学习,首先引入基本的css和js <link rel="stylesheet" href="css/reset.css"> <script src="http://libs.baidu.c…

关于sass的介绍和基本语法

引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器分Less.Sass 和 Stylus三种, 我用过的就是less和sass,less和sass有很多语法上的不同,但是最根本的不同点是less是基于javascript的,而sass是基于ruby开发的. 预处理器编译工具  鱿鱼引入提到的,sass文件最终还是要编译成正常的css文件才能为页面提…

数据可视化(5)--jqplot经典实例

本来想把实例也写到上篇博客里,最后发现太长了,拆成两篇博客了. 实例来源于官方文档:http://www.jqplot.com/tests/ 这篇博客主要是翻译了官方文档关于经典实例的解说,并在相应代码中添加注释. 写到后面的时候,感觉有点心不在焉,如果有错误,或者看不懂的,欢迎留言. Line charts, scatter plots and series options(线图,散点图和系列选项) 该类型图表可能依赖于以下插件 <script type="text/javascript…

CSS进阶

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线). p{border:2px dotted #ccc;} div{border-bottom:1px solid red;} 一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界. 元素内容与边框之间是可以设置距离的,称之为“填充”(padding)…