一、1像素边框

1像素下边框

.border-1px(@color:red) {

    @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){

    position: relative;

    &::after {

      -webkit-transform: scaleY(0.7);

      transform: scaleY(0.7);

      width: 100%;

      display: block;

      position: absolute;

      left: 0;

      bottom: 0;

      border-top: 1px solid @color;

      content: '';

    }

  }

    @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){

      &::after{

        -webkit-transform: scaleY(0.5);

        transform: scaleY(0.5);

      }

    }

}

  .border-none(){

    &:after{

      display: none;

    }

  }

1像素上边框,只需将&::after改为&::before,bottom:0改为top:0就可以了

你可能感兴趣的:(一、1像素边框)