1.问题回溯
通常会有那种两个div都有border重叠在一起就会有种加粗的效果。
div1,div2,div3都有个1px的border，箭头标记的地方是没有处理解决的，很明显看着是有加粗效果的。其实这种感觉把div3的width减小1px，外加一个margin-left:1px应该也可以的。文章来源：https://www.toymoban.com/news/detail-615618.html
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自由发挥。文章来源地址https://www.toymoban.com/news/detail-615618.html
到了这里，关于css实现有缺口的border的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
