css 移動端1px更細

1.最近寫項目常常遇到4個入口菜單放在一行，而後加border:1px 在移動端顯示卻很粗,以下圖：

 

 1 <div class="header">
 2        <div class="div-block color1">
 3                 1
 4        </div>
 5        <div class="div-block color2">
 6                 2
 7        </div>
 8        <div class="div-block color3">
 9                 3
10        </div>
11        <div class="div-block color4">
12                 4
13        </div>
14 </div>

 1 .header{
 2     display: flex;
 3     flex-direction: row;
 4 }
 5 .div-block{
 6     width: 25%;
 7     height: 100px;
 8     position: relative;
 9     display: flex;
10     justify-content: center;
11     align-items: center;
12     border:1px #ddd solid;
13 }
14 
15 .color1{
16     background: cornflowerblue;
17 }
18 .color2{
19     background:cadetblue;
20 }
21 .color3{
22     background:coral;
23 }
24 .color4{
25     background:crimson;
26 }

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

以上代碼便可，再次也做爲一個記錄。