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,可以定義成公用的，引用方便，缺點：換顏色要換圖片