border-bottom 分割线不可见主因是父容器高度塌陷、子元素浮动未清除或 inline 元素无垂直空间；需加 padding-bottom、避免 overflow:hidden、改用 inline-block 或伪元素替代。
border-bottom 画分割线为什么有时看不见
常见现象是加了 border-bottom 却没显示，大概率是父容器高度塌陷或子元素浮动未清除。比如在 div 里只放文字、没设 height 或 padding，而文字本身不撑开高度，border-bottom 就会“贴着文字底边”甚至被裁掉。
实操建议：
- 给目标元素加
padding-bottom: 1px（哪怕极小值），确保 border 有空间渲染 - 检查是否设置了
overflow: hidden或height: 0类似收缩样式 - 若用在 Flex 容器子项中，注意
align-items: flex-start可能让 border 被挤到可视区外 - 避免对
inline元素（如span）直接设border-bottom—— 它生效但垂直方向无高度，常被误认为“无效”，应改用display: inline-block
用 border-bottom 做分割线时的盒模型陷阱
很多人以为 border-bottom 是“额外加上的线”，其实它属于盒模型的 border 区域，会参与总尺寸计算。当容器有固定高度（比如 height: 40px），再加 border-bottom: 2px solid #ccc，就可能把内容往下压或触发滚动条。
实操建议：
- 优先用
box-sizing: border-box（现代项目基本默认），让 border 包含在设定的高度内 - 若必须用
content-box，记得从 height 中减去 border 宽度：height: calc(40px - 2px) - 不要依赖 margin-bottom 模拟分割线位置——border-bottom 的定位更稳定，且不会因 margin 合并出错
- 慎用
transform: scaleY(0.5)压缩 border 线：虽能变细，但在高 DPI 屏幕上易模糊或消失
替代方案：什么时候不该用 border-bottom
当需要响应式细线（如 0.5px）、抗锯齿、或要独立控制颜色/长度（比如只画半截线），border-bottom 就力不从心了。它的颜色、粗细、长度都绑定在元素盒上，没法局部干预。
实操建议：
- 需要真正 1px 细线 → 改用
background-image: linear-gradient(#ccc, #ccc)配合background-size控制粗细和位置 - 要左/右留空的分割线 → 用伪元素
::after+width和margin精确控制范围 - 在表格或列表中做隔行线 → 优先考虑
border-collapse: collapse或tr:nth-child(even)加 border，比每个td单独设更可控 - 动画分割线（如 hover 时延伸）→
border-bottom不支持 transition 宽度变化，得换transform: scaleX()或 background-position
兼容性与性能小提醒
border-bottom 本身兼容性极好（IE6+），但组合使用时容易翻车。比如在 position: absolute 元素上设 border-bottom，又同时用了 transform，某些旧版 Chrome 会渲染错位；或者大量列表项都加 border，在滚动时可能触发重绘压力。
实操建议：
- 移动端慎用
border-bottom: 1px solid #eee直接写死——在 dpr=2/3 的设备上实际是 2px/3px，应配合transform: scaleY(0.5)或媒体查询适配 - 长列表分割线别每个 item 都加 border-bottom，改用
li:not(:last-child)::after减少样式节点 - 如果分割线只是视觉分隔、无语义，避免用
hr标签——它自带 margin 和 display:block，反而更难对齐
最常被忽略的一点：border-bottom 的 color 默认是 currentcolor，也就是继承父元素的文字颜色。如果你没显式设 color，又恰好父元素 color 是 transparent 或 unset，线就没了——不是 bug，是设计如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
