@charset "UTF-8";
/*手机端实现真正的一像素边框*/
.border-1px,
.border-bottom-1px,
.border-top-1px,
.border-left-1px,
.border-right-1px {
  position: relative;
}

/*线条颜色 黑色*/
.border-bottom-1px::after,
.border-top-1px::after,
.border-left-1px::after,
.border-right-1px::after {
  background-color: #ddd;
}

.border-1px::after {
  background-color: transparent;
}

/*底边边框一像素*/
.border-bottom-1px::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

/*上边边框一像素*/
.border-top-1px::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

/*左边边框一像素*/
.border-left-1px::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

/*右边边框1像素*/
.border-right-1px::after {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

/*边框一像素*/
.border-1px::after {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  left: -1px;
  top: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
}

/*设备像素比*/
/*显示屏最小dpr为2*/
@media (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom-1px::after,
  .border-top-1px::after {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  .border-left-1px::after,
  .border-right-1px::after {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  .border-1px::after {
    width: calc(200% + 4px);
    height: calc(200% + 4px);
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
}

/*设备像素比*/
@media (-webkit-min-device-pixel-ratio: 3) {
  .border-bottom-1px::after,
  .border-top-1px::after {
    -webkit-transform: scaleY(0.333);
            transform: scaleY(0.333);
  }
  .border-left-1px::after,
  .border-right-1px::after {
    -webkit-transform: scaleX(0.333);
            transform: scaleX(0.333);
  }
  .border-1px::after {
    width: calc(300% + 6px);
    height: calc(300% + 6px);
    -webkit-transform: scale(0.333);
            transform: scale(0.333);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
}