一、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就可以了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容