css 移动端1px更细

1.最近写项目经常遇到4个入口菜单放在一行，然后加border:1px 在移动端显示却很粗,如下图：

<div class="header">
       <div class="div-block color1">
                1
       </div>
       <div class="div-block color2">
                2
       </div>
       <div class="div-block color3">
                3
       </div>
       <div class="div-block color4">
                4
       </div>
</div>

.header{
    display: flex;
    flex-direction: row;
}
.div-block{
    width: 25%;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px #ddd solid;
}

.color1{
    background: cornflowerblue;
}
.color2{
    background:cadetblue;
}
.color3{
    background:coral;
}
.color4{
    background:crimson;
}

以上1px的边框，太粗，就算中间菜单border-right:none或者border-left:none依然很粗。若要解决这个问题，可以尝试用下方方法：

.header{
    display: flex;
    flex-direction: row;
}
.div-block{
    width: 25%;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div-block:before{
    position: absolute;
    right:0px;
    top:0px;
    width: 1px;
    height:100%;
    content:"";
    transform: scale(0.5,1);
    -webkit-transform: scale(0.5,1);
    background: #ddd;
}
.color1{
    background: cornflowerblue;
}
.color2{
    background:cadetblue;
}
.color3{
    background:coral;
}
.color4{
    background:crimson;
}

以上代码即可，再次也作为一个记录。