one-border.less 2.48 KB
.border-1px{
  position: relative;
  &:before, &:after{
    border-top: 1px solid #e2e2e2;
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  &:before{
    top: 0;
  }
  &:after{
    bottom: 0;
  }
  &.border-top{
    &:after{
      display: none;
    }
  }
  &.border-bottom{
    &:before{
      display: none;
    }
  }

  // &.border-right{
  //   &:before{
  //     display: block;
  //     border-right: 1px solid #e2e2e2;
  //     height: 100%;
  //     top: 0;
  //     left: auto;
  //     width: 0;
  //     right: 0;
  //   }
  // }
}

.border-1px-full{
  position: relative;
  &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      border: 1px solid #e2e2e2;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      // border-radius: 3px;
      // -webkit-border-radius: 3px;
      // -moz-border-radius: 3px;
  }
}
// .border-1px-x{
//     position: relative;
//     &:before, &:after{
//       border-left: 1px solid #aaa;
//       content: ' ';
//       display: block;
//       height: 100%;
//       position: absolute;
//       top: 0;
//       z-index: 1;
//     }
//     &:before{
//       left: 0;
//     }
//     &:after{
//       right: -1px;
//     }
//     &.border-left{
//       &:after{
//         display: none;
//       }
//     }
//     &.border-right{
//       &:before{
//         display: none;
//       }
//     }
// }

@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
  .border-1px{
    &::after, &::before{
      -webkit-transform: scaleY(.7);
      -webkit-transform-origin: 0 0;
      transform: scaleY(.7);
    }
    &::after{
      -webkit-transform-origin: left bottom;
    }
  }

  // .border-1px-x{
  //   &::after, &::before{
  //     -webkit-transform: scaleX(.7);
  //     -webkit-transform-origin: 0 0;
  //     transform: scaleX(.7);
  //   }
  //   &::after{
  //     -webkit-transform-origin: left bottom;
  //   }
  // }
}

@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
  .border-1px{
    &::after, &::before{
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
  }

  // .border-1px-x{
  //   &::after, &::before{
  //     -webkit-transform: scaleX(.5);
  //     transform: scaleX(.5);
  //   }
  // }
}