解决移动端1px边框的问题 border.css

因为移动端一些设备物理像素和显示像素有区别，如果直接使用border:1px的话，在某些屏幕上变成了2px甚至3px。border.css就是为了解决这个问题诞生的。

首先引入border.css

在需要显示1像素border的区块上直接添加样式即可

.border,  //上下左右
.border-top, //上
.border-right, //右
.border-bottom,//下
.border-left,//左
.border-topbottom,//上下
.border-rightleft,//左右
.border-topleft,//上左
.border-rightbottom,//右下
.border-topright,//上右
.border-bottomleft//下左

如果需要改变border的颜色，添加before after伪类即可

如border-bottom 要改变颜色

.border-bottom
    &:before
        border-color: #ccc

border-topbottom要改变颜色

.border-topbottom    
    &:before
        border-color: #ccc
    &:after
        border-color: #ccc