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

概述

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

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

解决方案

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

1:使用png图片，设置元素的background-image和background-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;

}

看手机端支持：

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

扩展

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

优势和劣势

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

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

总结

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