0.5px边框，css及sass

手机上的边框，1px的宽度已经无法满足需求了，0.5px的需求应用而生。

做法：

利用伪类，做一个长宽200%，1px宽度的边框，再缩小至0.5倍。

div {
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-width: 0 0 1px;
    width: 200%;
    height: 200%;
    transform: scale(.5, .5);
    box-sizing: border-box;
    transform-origin: 0 0;
}

这样就是底0.5px的边框了;

sass：

$color_border:#ddd;
$border:1px solid $color_border;
@mixin border_s($top:0, $right:0, $bottom:0, $left:0) {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        border: $border;
        border-width: $top $right $bottom $left;
        width: 200%;
        height: 200%;
        transform: scale(.5, .5);
        box-sizing: border-box;
        transform-origin: 0 0;
    }
}

.exm {
    @include border_s(1px 0 1px);
}

方便复用，边框需求变幻