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

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

posted @ 2019-05-17 17:36  Mr.mmming  阅读(762)  评论(0)  编辑  收藏  举报