* {
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

html,
body {
  font-size: 16px;
}

/*
** border-1px
** created by arnan
*/

.m-border-1px {
  position: relative;
  border: none !important;
}
.m-border-1px:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #ccc;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.m-border-all:after {
  border-width: 1px;
}
.m-border-top:after {
  border-top-width: 1px;
}
.m-border-left:after {
  border-left-width: 1px;
}
.m-border-right:after {
  border-right-width: 1px;
}
.m-border-bottom:after {
  border-bottom-width: 1px;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .m-border-1px:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5) translate3D(-50%, -50%, 0); //先缩放后平移
    transform: scale(0.5) translate3D(-50%, -50%, 0);
  }
}
@media (-webkit-min-device-pixel-ratio: 3) {
  .m-border-1px:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333) translate3D(-100%, -100%, 0);
    transform: scale(0.3333) translate3D(-100%, -100%, 0);
  }
}
@media (min-device-pixel-ratio: 2) {
  .m-border-1px:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5) translate3D(-50%, -50%, 0);
    transform: scale(0.5) translate3D(-50%, -50%, 0);
  }
}
@media (min-device-pixel-ratio: 3) {
  .m-border-1px:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333) translate3D(-100%, -100%, 0);
    transform: scale(0.3333) translate3D(-100%, -100%, 0);
  }
}

/*
** 1px based on gradient
*/

.m-border-gradient-1px {
  background-repeat: no-repeat;
}

.m-border-gradient-1px.m-border-gradient-left {
  background-image: -webkit-gradient(
    linear,
    right bottom,
    left bottom,
    color-stop(0.3, transparent),
    color-stop(1, #ccc)
  );
  background-image: linear-gradient(to left, transparent 30%, #ccc);
  background-size: 1px 100%;
  background-position: left;
}
.m-border-gradient-1px.m-border-gradient-top {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, transparent),
    color-stop(1, #ccc)
  );
  background-image: linear-gradient(to top, transparent 30%, #ccc);
  background-size: 100% 1px;
  background-position: top;
}
.m-border-gradient-1px.m-border-gradient-bottom {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.3, transparent),
    color-stop(1, #ccc)
  );
  background-image: linear-gradient(to bottom, transparent 30%, #ccc);
  background-size: 100% 1px;
  background-position: bottom;
}
.m-border-gradient-1px.m-border-gradient-right {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.3, transparent),
    color-stop(1, #ccc)
  );
  background-image: linear-gradient(to right, transparent 30%, #ccc);
  background-size: 1px 100%;
  background-position: right;
}
.m-border-gradient-1px.m-border-gradient-tb,
.m-border-gradient-1px.m-border-gradient-bt {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.3, transparent),
      color-stop(1, #ccc)
    ),
    -webkit-gradient(linear, left bottom, left top, color-stop(0.3, transparent), color-stop(1, #ccc));
  background-image: linear-gradient(to top, transparent 30%, #ccc),
    linear-gradient(to bottom, transparent 30%, #ccc);
  background-size: 100% 1px, 100% 1px;
  background-position: top, bottom;
}

.m-border-gradient-1px.m-border-gradient-lr,
.m-border-gradient-1px.m-border-gradient-rl {
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0.3, transparent),
      color-stop(1, #e0e0e0)
    ),
    -webkit-gradient(linear, right top, left top, color-stop(0.3, transparent), color-stop(1, #e0e0e0));
  background-image: linear-gradient(to right, transparent 30%, #ccc),
    linear-gradient(to left, transparent 30%, #ccc);
  background-size: 1px 100%, 1px 100%;
  background-position: right, left;
}