在移动端会出现线条太粗的现象，简单来说，是因为手机端的像素单位和ui的图比例是2:1，所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框
1.
html部分
<div class="border">测试0.5px边框</div>
css部分
.border{
position: relative;
color: #555;
font-size: 14px;
line-height: 41px;
width:200px;
}
.border:after{
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #e8e8e8;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
z-index: 10;
}
用添加伪元素的方法添加下边框，再利用transform在y轴缩小1倍
2.
.border{
width:200px;
color: #555;
font-size: 14px;
line-height: 41px;
border-bottom: 1px solid transparent !important;
-webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-image: url("../img/line-bottom.png") 2 0 stretch;
-o-border-image: url("../img/line-bottom.png") 2 0 stretch;
-moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-width: 0 0 1px;
}
line-bottom.png 是宽1px 高2px的小图片，1px透明，1px用border的颜色，这样也能写出1px边框，优点，如果用less或者sass,可以定义成公用的，引用方便，缺点：换颜色要换图片