如何使用css3做0.5 px的细线

　　介绍

这篇文章给大家分享的是有关如何使用css3做0.5 px的细线的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Webapp中的css3实现0.5 px的细线

感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾起来,记忆,就是这样。

曾看过淘宝,京东,易迅,一号店等等电商的移动端网站,这些大的电商站的共同特点是做的精致,用户体验良好,其中在布局方面,0.5 px的线看上去就比1 px的线看上去要精致很多。

<强>方法一:使用渐变来做

html代码:

& lt; div> & lt;/div>

css代码:

.bd-t { 　　位置:才能相对; 　　} 　　 　　.bd-t: after  { 　　,,内容:“,“; 　　位置:才能,绝对; 　　,,左:0; 　　,,:0; 　　,,宽度:100%; 　　,,身高:1 px; 　　,,背景图片:线性渐变(0度,transparent  50%,, # e0e0e0  50%); 　　}

小心!注意此处有坑! ! !:

对于不同浏览器的兼容,我们需要使用不同的前缀如:

-webkit-linear-gradient 　　-ms-linear-gradient  　　-o-linear-gradient

坑就在这些前缀里:我们把代码里的身高1 px变成100 px,参数同为<代码> 0度,透明的50%,# e0e0e0 50%>

线性梯度有如下结果:

如何使用css3做0.5 px的细线

经过一系列的测试总结,我们可以推理出下面的渐变方式:

如何使用css3做0.5 px的细线

webkit-linear-gradient的代码效果图如下:

如何使用css3做0.5 px的细线

经总结,我们看到webkit前缀的渐变方式为:

如何使用css3做0.5 px的细线

其他的前缀如果用的到,还请小伙伴们自己来尝试填坑!

说明:

推荐这种写法,这是百度糯米移动站的做法(如果没改版的话):http://m.nuomi.com/,从上述代码的描述中,可以看的到,为了实现盒子顶部边框0.5 px的伪代码:<代码> border-top: 0.5 px固体# e0e0e0;>

<强>方式二:使用缩放

html代码:

& lt; div> & lt;/div>

css代码:

.bd-t { 　　位置:才能相对; 　　} 　　 　　.bd-t:{后 　　内容:才能,,,,,, 　　位置:才能,绝对; 　　,,左:0; 　　,,:0; 　　,,宽度:100%; 　　,,身高:1 px; 　　,,背景颜色:# e0e0e0;/*才能,如果不用,背景颜色,,使用,border-top: 1 px  solid  # e0e0e0; */,,-webkit-transform:写入scaleY (5); 　　变换:才能写入scaleY (5); 　　}

说明

这是实现盒子上边框0.5 px的做法,不是很推荐这种做法,因为经过测试,一些手机端浏览器显示的不是太好。这种实现的原理是:在Y轴方向上,压缩一半。就像上面注释的那样。
如果你觉得效果不太好,这里有一个回退或解决方案,任何:就是上面注释掉的那种做法:可以尝试使用<代码> border-top: 1 px固体# e0e0e0; 代替背景颜色的做法,京东就是这么做的(如果没改版的话):http://m.jd.com/

<强>方式二的拓展:如果要实现四周全是0.5像素的线条的话:

html代码:

& lt; div 类=& # 39;bd-all& # 39;祝辞& lt;/div>

css代码:

,, .bd-all { 　　,,,,,位置:相对; 　　,,} 　　 　　后,.bd-all: { 　　,,,,,内容:,,,,,, 　　,,,,,位置:,绝对; 　　,,,,,左:,0; 　　,,,,,:,0; 　　,,,,,z - index: 1; 　　,,,,,宽度:,200%; 　　,,,,,身高:200%; 　　,,,,,边界:1 px  solid  # e0e0e0; 　　,,,,,-webkit-transform-origin:, 0, 0; 　　,,,,,transform-origin:, 0, 0; 　　,,,,,-webkit-transform:,规模(5,5); 　　,,,,,变换:,规模(5,5); 　　以前,}

说明:

这是实现一个盒子四周0.5 px的做法,如果加入border - radius圆角效果,会发现,有些手机会有圆角发虚的情况,不过影响不是很大。如果有两个盒子,上面一个盒子没有边框效果,下面盒子有边框效果,两个盒子一样宽,上下在一起的布局方式,你会发现,在手机上有时候会对不齐,白马王子错开了0.5 px,原因已经很明了了,白马王子还有那个

如何使用css3做0.5 px的细线