/*水平线*/
.uni-hr {
  width: 100%;
  position: relative;
  height: 1px;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .uni-hr {
    transform: scaleY(0.5);
  }
}

/*边框样式*/
.uni-border-l {
  border-left: 1upx solid #dddddd;
}

.uni-border-r {
  border-right: 1upx solid #dddddd;
}

.uni-border-t {
  border-top: 1upx solid #dddddd;
}

.uni-border-b {
  border-bottom: 1upx solid #dddddd;
}

.uni-border {
  border: 1upx solid #dddddd;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .uni-border-l {
    border: none;
    background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
    background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%);
    background-size: 1upx 100%;
    background-repeat: no-repeat;
    background-position: left;
  }

  .uni-border-r {
    border: none;
    background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
    background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%);
    background-size: 1upx 100%;
    background-repeat: no-repeat;
    background-position: right;
  }

  .uni-border-t {
    border: none;
    background-size: 100% 1upx;
    background-repeat: no-repeat;
    background-position: top;
    background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
    background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
  }

  .uni-border-b {
    border: none;
    background-size: 100% 1upx;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
    background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
  }

  .uni-border {
    border: none;
    background-image: -webkit-linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%),
      -webkit-linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%),
      -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%),
      -webkit-linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%);
    background-image: linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%),
      linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%),
      linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%),
      linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%);
    background-size: 100% 1upx, 1upx 100%, 100% 1upx, 1upx 100%;
    background-repeat: no-repeat;
    background-position: top, right top, bottom, left top;
  }
}

.border,
.border--bottom,
.border--left,
.border--right,
.border--surround,
.border--top,
.border--top-bottom {
  position: relative;
}

.border--bottom::after,
.border--left::after,
.border--right::after,
.border--surround::after,
.border--top-bottom::after,
.border--top::after,
.border::after {
  content: ' ';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: 0 solid #eee;
}

.border--top::after {
  border-top-width: 1px;
}

.border--left::after {
  border-left-width: 1px;
}

.border--right::after {
  border-right-width: 1px;
}

.border--bottom::after {
  border-bottom-width: 1px;
}

.border--top-bottom::after {
  border-width: 1px 0;
}

.border--surround::after {
  border-width: 1px;
}