前端的同学想必都碰到过1px边框的问题，在高分屏手机上，我们会发现自己写的1px往往会比预想的“粗”一些，下面是他人总结的解决方案。
单线
写一个高度为1px的线，然后通过transform:scaleY(0.5)缩放来实现
div{
height:1px;
background:#ddd;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}边框+圆角
和上面的思路是一样的，也是通过放大后再缩小实现的，需要注意的是宽高以及圆角要设置为原来的2倍
div{
position: relative;
}
div:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;/* 宽高要放大 */
height: 200%;
border: solid 1px #ddd;
border-radius: 10px;/* 圆角要放大 */
overflow: hidden;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
}