移动端1px边框

问题：移动端1px边框，看起来总是2倍的边框大小，为了解决这个问题试用过很多方法，用图片，用js判断dpr等，都不太满意，

最后找到一个还算好用的方法：伪类 + transform

原理是把原先元素的 border 去掉，然后利用

:before

或者

:after

重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位

单条边框：

.hairlines li{position: relative; border:none; }
.hairlines li:after{content: '';  position: absolute;left: 0; background:red; width: 100%;height: 1px;
-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }

四条边框：

.hairlines li{position: relative; border:none; }
.hairlines li:after{content: '';  position: absolute;left: 0; top:0; border:1px solid red; width:200%;height:200%;
-webkit-transform: scale(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }

注：可以支持圆角，唯一的一点小缺陷是

<td>

用不了。