一像素边框的实现

給这个div添加底部一像素边框，<div class='box border-1px'>

//首先添加普通的底部一个像素的边框
.box
  position: relative
  &:after
    content: ' '
    display: block
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    border-top: 1px solid #000

 //然后利用媒体查询，根据不同的物理像素比，对这个一像素边框进行缩放
@media (-webkit-min-device-pixel-radio: 1.5),(min-device-pixel-radio: 1.5)
  .border-1px
    &::after
      transform: scaleY(0.7)
      -webkit-transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-radio:2)
  .border-1px
    &::after
      transform: scaleY(0.5)
      -webkit-transform: scaleY(0.5)