* {
  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(.5) translate3D(-50%,-50%,0);  //先缩放后平移
    transform:scale(.5) translate3D(-50%,-50%,0);
  }
}
@media (-webkit-min-device-pixel-ratio:3) {
  .m-border-1px:after {
    width:300%;
    height:300%;
    -webkit-transform:scale(.3333) translate3D(-100%,-100%,0);
    transform:scale(.3333) translate3D(-100%,-100%,0);
  }
}
@media (min-device-pixel-ratio:2) {
  .m-border-1px:after {
    width:200%;
    height:200%;
    -webkit-transform:scale(.5) translate3D(-50%,-50%,0);
    transform:scale(.5) translate3D(-50%,-50%,0);
  }
}
@media (min-device-pixel-ratio:3) {
  .m-border-1px:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(.3333) translate3D(-100%,-100%,0);
    transform: scale(.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;
}