使用css3做0.5px的细线
Webapp中的CSS3实现 0.5px的细线
感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾起来,记忆,就是这样。
曾看过淘宝,京东,易迅,一号店等等电商的移动端网站,这些大的电商站的共同特点是做的精致,用户体验良好,其中在布局方面 , 0.5px的线看上去就比1px的线看上去要精致很多。
方法一:使用渐变来做
html代码:
<div class="bd-t"></div>
css代码:
.bd-t{position:relative; }.bd-t::after {content: " ";position: absolute;left: 0;top: 0;width: 100%;height: 1px;background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%); }
Be careful ! 注意此处有坑!!!:
对于不同浏览器的兼容,我们需要使用不同的前缀如:-webkit-linear-gradient -ms-linear-gradient -o-linear-gradient
坑就在这些前缀里: 我们把代码里的height 1px 变成 100px , 参数同为
0deg, transparent 50%, #e0e0e0 50%
并使用最新版的chrome来测试 。linear-gradient 有如下结果:
经过一系列的测试总结,我们可以推理出下面的渐变方式:
webkit-linear-gradient 的代码效果图如下:
经总结,我们看到-webkit前缀的渐变方式为:
其他的前缀如果用到,还请小伙伴们自己来尝试填坑!
说明:
推荐这种写法,这是百度糯米移动站的做法(如果没改版的话):http://m.nuomi.com/ ,从上述代码的描述中,可以看到,为了实现盒子顶部边框0.5px的伪代码:border-top:0.5px solid #e0e0e0;
的效果,使用after,作为一个钩子,宽度100%,高度1px,背景渐变,一半透明,一半有颜色,这么干是可以的。同理,底部,左边和右边的细线,都是同一个道理了。当然,如果需要组合使用,盒子之间的嵌套使用,也是可以的,或者你有自己的想法(当然做法有很多种!)…
方式二: 使用缩放
html代码:
<div class="bd-t"></div>
css代码:
.bd-t{position:relative; }.bd-t:after{content: " ";position: absolute;left: 0;top: 0;width: 100%;height: 1px;background-color: #e0e0e0;/* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */-webkit-transform: scaleY(.5);transform:scaleY(.5); }
- 说明
这是实现盒子上边框0.5px的做法, 不是很推荐这种做法,因为经过测试,一些手机端浏览器显示的不是太好。这种实现的原理是: 在Y轴方向上,压缩一半。就像上面注释的那样。
如果你觉得效果不太好,这里有一个 fallback or workaround, whatsoever: 就是上面注释掉的那种做法:可以尝试使用border-top:1px solid #e0e0e0;
代替background-color的做法,京东就是这么做的(如果没改版的话): http://m.jd.com/
- 说明
方式二的拓展 : 如果要实现四周全是0.5px的线条的话 :
html代码:
<div class='bd-all'></div>
css代码:
.bd-all{position:relative;}.bd-all:after{content: " ";position: absolute;left: 0;top: 0;z-index:-1;width: 200%;height:200%;border:1px solid #e0e0e0;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(.5, .5);transform: scale(.5, .5);}
说明 :
这是实现一个盒子四周0.5px的做法, 如果加入border-radius圆角效果,会发现,有些手机会有圆角发虚的情况,不过影响不是很大。如果有两个盒子,上面一个盒子没有边框效果,下面盒子有边框效果,两个盒子一样宽,上下在一起的布局方式,你会发现,在手机上有时候会对不齐… 错开了0.5px,原因已经很明了了…还有那个z-index
,可以根据不同需求来调整使用,如果可以的话,不使用也是可以的。
方式三: 使用background-image和css3的九宫格裁减
京东之前是这么做的,现在已经不被使用了。具体做法,请看下面demo结构:
├─demo/ ························ demo 目录└─┬─ test.html ··············· test.html 文件└─── pic.png ·················· png 图片文件
在test.html 中 有如下关键代码:
html 结构:
<div class="bd-t"></div>
css 结构:
.bd-t{position: relative; } .bd-t::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid transparent; /* 下面用 stretch 和 round 都可以 */ border-image: url('pic.png') 2 1 1 1 stretch; -webkit-border-image: url('pic.png') 2 1 1 1 stretch; }
而 pic.png 的九宫格切法,如下图:
具体有关 border-image 的用法,网上有很多:
w3c 上的这个讲的不是很具体:http://www.w3school.com.cn/cssref/pr_border-image.asp
在 MDN 上 有明确的介绍,并且有很多配图,包括兼容性等等:https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
但是不推荐这种写法,毕竟图片质量比较大,能用代码解决的,不用图片。在这里border-width 是 1px , 但是 背景是有2px的距离,所以在1px的border-top上,显示出有颜色的高度就是0.5px, 同理,底边,左边和右边的0.5px,也都很容易实现。 这个就是css3的魅力体现(这个现在兼容性也不是很好,在一些较低端的安卓浏览器和一些版本的safari 支持的也不是很好)。
方式四 (推荐): weui的实现方式 :
这是一款微信团队开发的UI 组件 详情见: weui , 它的使用方式是这样的:
.weui-cell:before{content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #D9D9D9;color: #D9D9D9;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);
}
方式五: 使用同周边相似的浅色,利用视觉效果,让用户产生错觉
- 这个就考验设计师的功力了 :)
其他说明:
- 不是很推荐使用渐变来做 , 在移动设备上可以看到,但在一些浏览器上看不到,不便于调试。
扩展
扩展: 更多花式渐变作为参考(内容太多,如果你能记住的话):
http://www.runoob.com/css3/css3-gradients.html
http://www.zhangxinxu.com/wordpress/2013/09/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3css3-gradient%E6%96%9C%E5%90%91%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98/
使用css3做0.5px的细线相关推荐
- css:移动端实现1px、0.5px的细线
实现效果 在线体验: https://mouday.github.io/front-end-demo/1px.html 实现代码 <body><style>* {margin: ...
- css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景 实现外部圆角边框,内部圆角渐变色背景,是用父div ...
- css3 使用SVG做0.5px 的边框细线
.HalfPixelLine{background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http:/ ...
- html怎么添加5px高的线,CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
- 如何画一条0.5px的边(细线)
理论上1px已经是最小单位了,那如何画一条0.5px的线呢 解决办法: 1.移动端,使用meta viewport 的方式 <meta name="viewport" con ...
- html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
- html5给div设置单边界,纯CSS实现border的0.5px设置
移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔 ...
- 用css3做一个模拟火箭飞行的简单动画。
用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...
- html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
最新文章
- [CCO 2019] Sirtet(差分约束+最短路)
- 百度蜘蛛(BaiduSpider)IP段详细情况介绍
- 【转】OneDrive开发入门
- webpack 入门,说一下那些不入流的知识点、module.exports{ } 中配置说明
- qaxwidget传递参数到html,记一次QT使用QAxWidget打开.html文件调用显示离线百度地图不能缩放,自定义图片不能显示解决方法...
- 要开始研究.NET了
- 27个澳洲年轻人,重演了少年马云的一段奇遇
- 在AIX 5.3+HACMP 5.4以上环境安装10gR2 10.2.0.1 RAC CRS Clusterware必须先运行Patch 6718715中的rootpre.sh...
- 大白话解析模拟退火算法、遗传算法
- 最受欢迎的网管工具集
- 格式工厂 wav 比特率_IQmango Converter下载-IQmango Converter(音视频格式转换工具)v3.4.6免费版...
- LQR控制算法及其仿真实现
- 计算机网络实验一VLAN间路由
- 如何不用电脑安装ipa
- kali之破解隔壁老王wifi
- 继续教育计算机考试试题,第四批继续教育计算机考试试题.doc
- 中基鸿业低收入家庭如何理财
- 定制纳米储氢材料NdNi4.8Sn0.2/CNTs纳米碳管复合储氢材料/膨胀石墨/LiBH4复合储氢材料
- 7-1 求一元二次方程的根 (20 分)
- 孙陶然:创业是从零开始的一次全新旅程