关于1px边框的学习

今天仔细看了以下weui（http://weui.github.io/weui）的css，发现全部边框都是使用伪类来实现。

最开始十分疑惑，为什么不直接使用border呢？

后来仔细看看发现，同时配合伪类实用的还有scale。
而且在mac上面，线条是1px。

这不禁让我赞叹！好巧妙的方法，通过缩放压缩线条。

以下是下边框1px现的css：

.weui_cells:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

通过y方向上的缩放，达到了1px高度线条。

.weui_btn: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);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
}

这里通过也是一样的原理。

想想我原来都是用js判断浏览器，通过class判断1px和0.5px边框，还是不够优雅。