这不是bug，是边框各自独立渲染的自然结果；Flex不提供边框合并机制，相邻子项边框物理贴合导致视觉加粗，border-collapse对其无效，推荐优先用gap解决，兼容性不足时可用负margin或box-shadow替代。
这不是bug，是边框各自独立渲染的自然结果——两个相邻子元素都画了1px solid #ccc，视觉上就叠成2px粗的线。
Flex子项边框重叠的根本原因
Flex布局本身不提供“边框合并”机制。它只负责排列子项位置，不干预边框绘制逻辑。每个子项按自己的border属性完整渲染四条边，左右/上下紧挨时，相邻边就会物理贴合，形成加粗假象。
你不能指望border-collapse: collapse起作用——它只对<table>及其<td>生效，加在Flex容器或<div>上会被浏览器直接忽略。
gap属性为什么能“一键解决”但又不能乱用
gap是在Flex容器上声明的间隙，它会在子项之间插入空白区域，让边框不再接触。写法简单：.parent { display: flex; gap: 12px; }。
立即学习“前端免费学习笔记（深入）”；
但它不是万能的：
- IE全系不支持；Safari直到14.1才支持
gap在Flex中（旧版只认Grid） -
gap只作用于子项之间，不影响第一个/最后一个子项到父容器边缘的距离 - 如果父容器设了
overflow: hidden，且子项内容溢出，gap产生的空白可能被裁掉
负margin方案的实操细节和隐藏风险
当gap不可用时，margin-left: -1px（水平排列）或margin-top: -1px（垂直排列）是最常用fallback，但必须匹配边框宽度。
容易踩的坑：
- 没加
position: relative和z-index：hover时后一个子项会盖住前一个的右/下边框 - 响应式场景下边框变
2px，但-1px没同步改，导致露白或错位 - 父容器
overflow: hidden会把负偏移部分裁掉，边框直接消失 - 在
flex-wrap: wrap下，负margin可能导致换行错位，尤其当子项高度不一致时
box-shadow替代边框的适用场景
当需要hover动态控制、避免重排、或要绕开层叠干扰时，box-shadow: 0 0 0 1px #ddd比border更可控。
优势明显：
- 不参与盒模型计算，不影响布局尺寸
- 可单独控制某一边（如
box-shadow: 1px 0 0 0 #ddd模拟右边框） - hover时改
box-shadow比改border更轻量，不触发重排 - 层级由父层叠上下文决定，比靠
z-index硬调更稳定
最常被忽略的一点：边框重叠问题，本质是“多个元素同时承担同一条边的绘制责任”。先明确“哪条边该由谁来画”，再选技术手段——否则无论用gap、负margin还是box-shadow，都只是掩盖结构设计上的模糊。
