移动端1像素处理方法(less 预处理)

/*

** 四边框

*/

.border(@color: #dbdbdb; @radius: 0) {

  &:after {

    content: " ";

    width: 200%;

    height: 200%;

    position: absolute;

    top: 0;

    left: 0;

    border: 1px solid @color;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    box-sizing: border-box;

    border-radius: @radius;

    z-index: 2;

  }

}

/*

** 上边框

*/

.border-top(@color: #dbdbdb; @left: 0)  {

  &:before {

    content: " ";

    position: absolute;

    left: @left;

    top: 0;

    right: 0;

    height: 1px;

    border-top: 1px solid @color;

    color: @color;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

    z-index: 2;

  }

}

/*

** 下边框

*/

.border-bottom(@color: #dbdbdb; @left: 0)  {

  &:after {

    content: " ";

    position: absolute;

    left: @left;

    bottom: 0;

    right: 0;

    height: 1px;

    border-bottom: 1px solid @color;

    color: @color;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

    z-index: 2;

  }

}

/*

** 左边框

*/

.border-left(@color: #dbdbdb; @top: 0)  {

  &:after {

    content: " ";

    position: absolute;

    left: 0;

    top: 0;

    width: 1px;

    bottom: 0;

    border-left: 1px solid @color;

    color: @color;

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: scaleX(0.5);

    transform: scaleX(0.5);

    z-index: 2;

  }

}

/*

** 右边框

*/

.border-right(@color: #dbdbdb; @top: 0)  {

  &:before {

    content: " ";

    position: absolute;

    right: 0;

    top: 0;

    width: 1px;

    bottom: 0;

    border-right: 1px solid @color;

    color: @color;

    -webkit-transform-origin: 100% 0;

    transform-origin: 100% 0;

    -webkit-transform: scaleX(0.5);

    transform: scaleX(0.5);

    z-index: 2;

  }

}