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自由发挥。