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);
}
方便复用，边框需求变幻