移动端0.5像素边框兼容性问题

项目中会遇到UI指定边框用0.5像素的，但实际单纯的border:0.5px solid #ddd;在很多移动端设备上会出现显示异常甚至直接消失，这是不同设备对像素处理的问题。像是很多android识别不了0.5像素就会直接不显示。

这里提供一种我用的有效的解决方案：

1. 取消按钮的边框，并设置按钮定位 position: relative;
2. 为按钮添加 before伪元素，并设置 position: absolute;
3. 利用before模拟边框，并且先设置足够能被设备识别的边款，然后进行缩放到想要的边宽
   代码：

.type .tab .tab-item {
  font-size: 0.28rem;
  color: #BBBBBB;
  height: 0.6rem;
  border-radius: 0.08rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  margin-right: 0.28rem;
  position: relative;
  display: flex;
  align-items: center;
  &::before{
    content: "";
    position: absolute;
    border: 4px solid #ddd;
    width: 800%;
    height: 800%;
    transform-origin: 0 0;
    transform: scale(0.125, 0.125);
    box-sizing: border-box;
    border-radius: 4.64rem;
    top: 0;
    left: 0;
  }
}

需要注意一下，例子中因为要求用的是全圆角，所以直接指定了一个足够大的border-radius，但实际上如果ui给定一个非全圆角的 border-radius的话，这个border-radius数值要乘以缩放比例才能达到ui指定效果