CSS 中的 1px 并不等于移动设备的 1px，由于不同手机有不同的像素密度。

方案一：使用边框图片 border-image

.border-image-1px {
  border: 1px solid transparent;
  border-image: url('../img/border') 2 repeat;
}

方案二：使用 box-shadow 模拟，可以为元素添加一个阴影，然后将阴影的大小设置成1px，就可以实现高清的1px边框效果

.box-shadow-1px {
  box-shadow: inset 0 -1px 1px -1px #e5e5e5;
}

方案三：伪类 + transform + 绝对定位实现，可以将元素缩小到原来的一半，然后再将元素放大两倍

.scale-1px {
  position: relative;
}

.scale-1px::after {
  content: ' ';
  width: 100%;
  height: 1px; /* no */
  background: #e5e5e5;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleY(0.5);
}

方案四：使用viewport单位: 通过使用vw和vh单位，可以根据设备的宽度和高度来计算边框的宽度和高度，从而达到高清的1px边框效果。