1px

stylus版本

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    content: ' '
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
@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)

<style lang="stylus>
  div
  	width 100px
  	height 100px
    border-1px(rgba(7, 17, 27, 0.1))
</style>
<div class="border-1px"></div>

css版本

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

这是2倍屏的情况下使用，更多设置可跳转