详解移动端Html5页面中1px边框的几种解决方法

关于移动端Html5页面中1px边框的几种解决方法，有如下几种：

方案一：使用css3的scale缩放

因为css3的transform属性可以进行缩放，所以我们可以使用scale进行缩放达到1px的效果。

border: 1px solid #000;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);

这种方式会对元素进行缩放，所以对于需要进行定位或者嵌套的元素会有一定的影响。

方案二：使用伪类

可以使用伪类的border解决方案。

.onepx{
  position: relative;
}
.onepx:after{
  content: "";
  display: block;
  position: absolute;
  border: 1px solid #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0.5);
}

这种方式并不会对元素本身进行调整，所以对于定位和嵌套都没有影响，但是代码量会增多。

除此以外，还有一些其他的方式如使用图片或者使用viewport等方法。不过以上提到的两种方案是比较常用的，可以满足常见的边框需求。

示例1：使用CSS3的scale缩放

<div class="box">这是一个有1px边框的元素</div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

在示例1中，我们使用CSS3的scale缩放来实现1像素边框。需要注意的是，我们也使用了transform-origin属性将缩放的原点设置在了左上角。

示例2：使用伪类

<div class="box-border">这是一个有1px边框的元素</div>

.box-border {
  width: 100px;
  height: 100px;
  position: relative;
}
.box-border:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #333;
  transform: scaleY(0.5);
  width: 100%;
  height: 100%;
}

在示例2中，我们使用了伪类来实现1像素边框。需要注意的是，我们使用了box-sizing: border-box;属性，这样我们的元素的宽高就不会被边框撑开。