border-collapse仅对table元素有效，div等非表格元素使用无效；替代方案包括负margin、box-shadow模拟单边框、border-style:hidden等。
border-collapse 只对 table 有效，别乱用在 div 上
想让两个 div 的边框“合并”成一条线？直接写 border-collapse: collapse 没用——它只作用于 table 元素及其子元素（tr、td 等）。用在普通块级元素上完全被忽略，CSS 会安静地当它不存在。
常见错误现象：div 并排后出现双倍边框间距，以为加个 border-collapse 就能“压合”，结果毫无变化。
- 真正能生效的场景：只有
table+border-collapse: collapse才会让相邻单元格边框真正合为一条 - 替代方案不是“模拟 collapse”，而是主动控制边框归属：比如让上一个元素留底边，下一个留顶边，其余设为
none - 注意兼容性：
border-collapse在所有现代浏览器中稳定支持，但对非表格元素无效这点，连 Safari 都不例外
margin 负值是最快捷的“视觉合并”手段
两个相邻 div 各自带 1px solid #ccc，默认会看到 2px 间距。最直接解法是用负外边距抵消掉一条边框的视觉厚度。
实操建议：
- 若上下排列，给下方元素加
margin-top: -1px（假设边框宽 1px） - 若左右排列，给右侧元素加
margin-left: -1px - 务必同步调整父容器
overflow: hidden或留出余量，避免负 margin 导致内容溢出或布局塌陷 - 注意响应式：边框宽度变时（如
2px），负 margin 值也得跟着改，硬编码容易漏
示例：
.item { border-bottom: 1px solid #ddd; }
.item + .item { margin-top: -1px; }
box-shadow 模拟单边框，规避重叠计算难题
当元素需要 hover 状态或动态增减边框时，用 margin 负值容易引发重排或逻辑混乱。这时可以放弃真实边框，改用 box-shadow “画”出单侧线。
为什么这么做更稳：
-
box-shadow不参与盒模型计算，不影响布局流，不会触发 margin 合并或塌陷 - 可精准控制方向和模糊度，比如
box-shadow: 0 1px 0 #ddd就是干净的下边线 - 多层 shadow 可叠加不同颜色/偏移，比反复切边框更灵活
- 注意性能：大量使用扩散型
box-shadow（尤其带blur）可能影响滚动帧率，纯0模糊值无负担
border-style: hidden 不等于 transparent，但能“吃掉”冲突边框
在 flex 或 grid 布局中，多个子项共享一条分隔线时，与其每个都画边框再想办法“合并”，不如让中间项只画一侧，首尾项各补一端——而 border-style: hidden 是个冷门但好用的工具。
关键区别：
-
border-color: transparent仍占位，边框宽度还在，只是看不见；border-style: hidden会彻底移除该侧边框的渲染（类似none），且在边框冲突时优先级更高 - 典型场景：table 中某格想隐藏右边线，用
border-right: hidden比border-right: none更可靠，尤其在border-collapse: collapse下 - 不推荐用于非 table 元素——浏览器支持不稳定，部分旧版 Chrome 对
hidden解析异常
复杂点在于：边框是否“真正消失”，取决于渲染引擎如何处理层叠顺序和边框交点。有时候你以为盖住了，其实只是颜色压过了，换背景色就露馅。动手前先在不同背景上预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
