实现1像素边框

1. 添加伪类,实现1像素边框

.border-1px{
  background-color: royalblue;
  position: relative;
  &:after{
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 1px solid #000;
    content: ' ';
  }
}

2. 对伪类在不同物理像素比下进行缩放

// 1像素边框: 对伪类进行缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &:after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &:after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}