3-21 实现1物理像素边框

// 实现1物理像素边框


.border-1px-inenr(@color) {
  &::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: @color;

    @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
      transform: scaleY(.5);
    }

    @media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
      transform: scaleY(.333);
    }
  }
}
.border-1px(@color, @offset) when (@offset=top){
  .border-1px-inenr(@color);
  &::after {
    top: 0;
  }
}

.border-1px(@color, @offset) when (@offset=bottom){
  .border-1px-inenr(@color);
  &::after {
    bottom: 0;
  }
}
posted @ 2022-03-21 14:20  林见夕  阅读(41)  评论(0编辑  收藏  举报