利用伪类和tranform实现1px 边框border

 

.border-1px{
    position: relative;
}
.border-1px:after{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    content: ' ';
}
@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);
    }
}