移动端0.5px边框实现方式

写在前面
在手机页面中，使用1px边框，有事感觉比较粗。使用0.5px会是的页面更加精简。 下面是代码实现

html结构如下：

css样式如下：

.parent{
  position: relative;
  &:after{
    /* 绝对定位到父元素最低端，可以通过left/right的值控制边框长度或者定义width:100%;*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 初始化边框 */
    content: '';
    box-sizing: border-box;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* 以上代码，实现了一个边框为1px的元素，下面实现0.5px边框*/
    transform: scaleY(0.5); // 元素Y方向缩小为原来的0.5
    transform-origin: 0 0; // CSS属性让你更改一个元素变形的原点。
  }
}