产生原因：因为dpr(devicePixelRatio)=物理像素(设备像素)/逻辑像素(css像素)，一般来说使用px为单位的时候，一个逻辑像素往往都对应一个物理像素，但是如果分辨率提高了之后，意味着屏幕宽度不变的情况下，物理像素点多了，所以这时候一个css像素对应的不仅仅是一个物理像素，所以1px会看起来比较粗了；
解决办法：
原理是将原生元素的border去掉，然后利用伪元素:before或者:after重做border，设置transform的scale缩小一半，原生元素相对定位，border绝对定位；
优点：所有场景都能满足，支持圆角（伪元素和本体都需要加border-radius）
缺点：对于已经使用伪元素的元素来说，可能需要多层嵌套
代码：
.border {
border-bottom: 1px solid #000;
}
.border::after {
content: " ";
position: absolute;
pointer-events: none;
bottom: 0;
width: 100%;
height: 1px;
-webkit-transform: sacle(0.5);
tranform: scale(0.5);
}