使用伪类:after,:before和transform：scale()实现

border-box{
    position:relative;
}
.border-box:after{
        content:'';
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        border-top:1px solid #ddd;
     }
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-box:after{
       
        transform:scaleY(0.5);
        -webkit-transform:scaleY(0.5);
     }
 } 
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    .border-box:after{
       
        transform:scaleY(0.3);
        -webkit-transform:scaleY(0.3);
     }
 }