导航细线边框的实现

发表于 | 分类于 |

要实现如下边框：

一般不要直接给每个盒子加border：1px solid #ccc，这样会使中间的边框线重合变成了2px的线，太粗，不好看。

方法一：

只给盒子的下边框和右边框加border,贴边的消除border

1
2
3
4
5
6
7
8
9
10
.nav-item {
  
  /*border: 1rpx solid #ccc;/*不建议这样写，这样会造成中间的分割线为2rpx*/
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
  box-sizing: border-box;
}
.nav-item:nth-child(3n){
  border-right: 0 none;
}

方法二：

使用伪元素加定位

1
2
3
4
5
6
7
8
9
10
11
12
.nav-item::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: red;
  position: absolute;
  right: 0;
  top: 0;
}
.nav-item:nth-child(3n)::after{
  width: 0;
}

更好的方式是将上述代码封装起来，以便多次调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bdr{    
    /* 2.3.子绝父相 */
    position: relative;
}
.bdr::after {
    /* 2.1.通过伪元素绘制一像素的右边框 */
    content: "";
    width: 1rpx;
    height: 100%;
    background-color: #ddd;
    /* 2.2.定位，不占位置 */
    position: absolute;
    right: 0;
    top: 0;
}