纯CSS实现border的0.5px设置

移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔线的问题,我们可以看到,很多的APP中,区域的border的分割线,都是一条很细很细的线,接下来,我们就来说说这些细线的问题。

概述

在这之前,我们要先知道一个问题,那就是在浏览器中,对于元素设置的某些数据设置成浮点型,那么浏览器的表现时不同的,比如,我们可以这样最简单的设置,给一个div元素,设置一个height:0.5px的属性,可以在不同的浏览器下看看到不同的效果,这里不对这个进行总结,我们这里只来说说在移动端的情况。

这个时候,IOSSafari表现就无疑是更好的,safari是可以支持浮点型的属性的,所以,如果想要在IOS的系统中,出现这样的0.5pxborder宽度,是可以直接使用border的,而在Andriod下,就变的麻烦了,Andriod的系统(我见过的一些安卓机)的浏览器,会对浮点型数据执行四舍五入的情况,即你给元素设置border-width:0.5px,那么其表现与你设置border-width:1px;是相同的,而这个时候,就需要一些特殊的方法,来实现这个0.5pxborder的值。

解决方案

这里的解决方案,我只把我知道的来说明一下:

1:使用png图片,设置元素的background-imagebackground-size两个属性来实现。

2:使用png图片,设置border-image来实现。

3:在meta元素的viewport标签中,设置scale属性(h5.m.taobao.com使用该方法,要设置成手机模式才可以)。

这些方法,都涉及到了CSS3的属性,所以,我们假设这个需求只在支持CSS3的浏览器中才能实现,那他们的优劣呢?

使用png的图片,不管是设置在background还是设置在border中,都有一个问题就是,这个元素没有办法设置圆角,当如果我需要改变这个边框的颜色时,需要重新设计图片,需求变更时不灵活。

meta中设置scale属性,那么接下来的整个页面的实现,就变的更加困难,因为所有的地方,都要考虑到宽高,大小等,都会被scale属性影响的。

所以,我这里想要说的这种方法,是我想到的一个优于以上方法的方法,至于为什么会更优,请接下来继续看看。

新的解决方案

我这里先把方法进行说明,接下来的示例,是按照以下结构来处理的

    
边框宽度1px
边框宽度0.5px

其中,custom-border对应的div,是直接使用border实现的,这里我们是用来对比的。

scale-border对应的div,是经过处理掉的,边框是0.5px的。

从这里,也可以看出,如果需要使用该方法,那么在每个使用该方法的地方,都需要额外的添加两个额外的标签,所以在可以不使用该方法的时候,尽量不使用。

而对于这个结构,可以设置如下的CSS样式

    
.custom-border{
    width:200px;
    margin:10px auto;
    height:100px;
    border:1px solid #333;
    background-color:#eee;
    padding:10px;
}
.scale-border{
    margin:10px auto;
    height:100px;
    position:relative;
    padding:10px;
    width: 200px;
}
.border{
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    position:absolute;
    border:1px solid #333;
    top:-50%;
    right:-50%;
    bottom:-50%;
    left:-50%;
    border-radius: 10px;
    background-color:#eee;
}
.content{
    position:relative;
    z-index:2;
}

    

看示例源代码,请看PC端:http://www.zhangyunling.com/study/2016/20160716/border-scale-0.5-pc.html

看示例源代码,请看Mobile端:http://www.zhangyunling.com/study/2016/20160716/border-scale-0.5-mobile.html

看手机端支持:二维码

至于其中的原理,我这里不进行说明,这个希望看到该文章的您,自己去思考,至于兼容性,我有在IOS和一个Andriod测试了一下,表现良好,唯一的就是,颜色可能有些变化,因为使用了scale属性,这个我觉得可以接受。

扩展

这里,我只给出了一个例子,那就是四周都有边框,并且设置了圆角的例子,如果您需要只是一个下划线,或者某一边的边框,请在上述情况下进行修改,甚至,如果您只需要一个边有边框,那么上述的CSS样式其实是可以更简单的实现,这里就需要您自己去实验,测试了,当然,如果您不愿意做这个实验,只是想要拿来使用的话,那么最简单的方法,是只设置一个边的边框宽度,其他的边border-width:0px;或者把其他边框的颜色设置为透明色都可以。

优势和劣势

我认为该方法的优势在于,可控性强,可以设置圆角,随意变换颜色,不需要改变其他的布局,不需要额外下载图片等。

劣势在于,每一个使用该方法的地方,都会额外的多添加了两个标签。

总结

由于受限于个人所有的设备,所以并没有经过很多的测试,只测试过IOS的safari和一个Andriod手机的UC浏览器和微信内置浏览器(Andriod 4.1的版本),表现都很好,没有问题,所以如果您发现兼容性问题,请告知,非常感谢!

本文地址:http://www.zhangyunling.com/?p=543

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>