css 0.5px 间隔细线 | border 细线的实现 参考WeUI

在Android中系统是识别0.5dp的，但是在web中浏览器内核在遇到0.5px时会向上取整为1px。
前端UI设计的间隔线都是设计0.5px，这时候用border-bottom: 1px solid #e6e6e6;
效果还是很粗的，UI复核页面的时候肯定不过关的。
下面说一下参考WeUI的解决方案：
WeUI
jQuery WeUI
Tencent/weui Github
1. 间隔线
先看WeUI源码的实现

提取核心：
.weui-cell {
  position: relative;
}
.weui-cell:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;//看情况使用
}

然后这样使用 <div class="weui-cell"/>

2.border 描边
再看WeUI源码的实现

提取核心：
.weui-border {
  position: relative;
  border-radius: 5px;
}
.weui-border:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
}

然后这样使用 <div class="weui-border">xxx...</div>