CSS实现0.5px border的方法

##CSS实现0.5px border的方法

在做app里的webview的时候，经常遇到分辨率是屏幕像素x2所以实际屏幕把1px变成2px的情况

故需要1px的border实际就是需要0.5px的，这个时候就得用css3的压缩功能

###css3写法：

%one-pixel-border {
	content:"";
	display:block;
	width:100%;
	border-top:1px solid #e5e5e5;
	transform: scaleY(.5);//将高度压缩一半
	transform-origin: 0 0;//从哪里开始压缩
	position:absolute;
	left:0px;
	margin-left: 1.09rem;
}

###如何使用，sass的写法：（以下等同于border－bottom的效果）

&:after {//top就是before
	@extend %one-pixel-border;
}

###BTW:

如果想要遇到设计师要调整padding但是因为有border但是不想重新算width的话

可以使用box-sizing:border-box

这样就只要按他要求的width来，完全不要去想content的width有多宽