css实现有缺口的border

1.问题回溯

通常会有那种两个div都有border重叠在一起就会有种加粗的效果。

div1,div2,div3都有个1px的border，箭头标记的地方是没有处理解决的，很明显看着是有加粗效果的。其实这种感觉把div3的width减小1px，外加一个margin-left:1px应该也可以的。

2.css实现有缺口的border

    .center {
      width: 302px;
      display: flex;
      flex-direction: column;
      height: 750px;
      box-sizing: border-box;
      padding: 0 15px;
      background: #F5F7FA;
      border: 1px solid #C9C9C9;
      position: relative;
         &::before {
        content: '';
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 1px;
        height: 748px;
        background-color: #ffffff;
      }
      }

我这里的这种主要注意class的position: relative，然后就是::before的所有都是重点，left,bottom,width属性的px值要灵活变通，height属性也是class的height的px值减去2倍的border的px值。
如果你要实现多个方向的缺口的话，就可以不用伪元素，直接自定义class名，同理上面的style自由发挥。