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;
}

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