css写出0.5px边框（一）

在移动端会出现线条太粗的现象，简单来说，是因为手机端的像素单位和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,可以定义成公用的，引用方便，缺点：换颜色要换图片