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