border-bottom 失效主因是盒模型约束与参数缺失：需同时指定宽度、样式、颜色（如1px solid currentColor），并配合padding-bottom留白，注意height、float、flex对齐及高DPI渲染影响。
border-bottom 是最常用也最可靠的分割线实现方式，但它不是“画一条线”那么简单——它本质是盒模型 border 区域的一部分，行为受 box-sizing、padding、父容器流式状态等共同约束。用错参数或忽略上下文，线条就容易消失、偏移、变粗或触发意外重排。
为什么 border-bottom 看不见？常见失效场景
它不独立存在，依赖宿主元素的盒模型状态：
- 元素本身
height: 0且无内容、无padding，border-bottom就没“落脚点” - 父容器未设
overflow: hidden，而子元素浮动了，导致父容器塌陷，border-bottom被挤出可视区 - 写了
border-bottom: 1px solid却漏了颜色（如没写currentColor或具体色值），浏览器按初始值transparent渲染，自然不可见 - 在 Flex 容器中对子项设
border-bottom，但父容器用了align-items: center，底线被垂直居中顶高，视觉上“浮”在文字中间
border-bottom 必须写的三个参数缺一不可
只写 border-bottom 是无效简写，必须显式包含宽度、样式、颜色：
-
border-bottom-width：推荐用1px；thin/medium在不同浏览器渲染不一致，别碰 -
border-bottom-style：必须是solid；dashed在高 DPI 屏上易发虚、断续，慎用 -
border-bottom-color：首选currentColor，自动继承文字色，主题切换时零额外维护
正确写法：border-bottom: 1px solid currentColor;
立即学习“前端免费学习笔记（深入）”；
和 padding-bottom 配合才真正可用
光有线，文字会“压线”。分隔效果是否舒服，取决于内容与线之间的留白：
-
padding-bottom把内容推离底线，是唯一稳定可控的间距手段 - 别用
margin-bottom模拟——它可能和相邻元素 margin 折叠，导致间距不准 - 若容器有固定高度（如
height: 44px），加了border-bottom: 1px后内容会被往下压，此时需确认box-sizing是border-box，否则得手动减去边框宽：height: calc(44px - 1px)
高 DPI 屏下视觉 1px 的取舍
Retina / Windows 高 DPI 屏默认把 1px 渲染为 2 物理像素，这是浏览器主动适配，不是 bug：
- 想强行“视觉 1px”，可用
transform: scaleY(0.5)缩放，但会脱离文档流基准，影响后续布局定位 - 更稳妥的做法是接受默认渲染——用户感知的是清晰度与一致性，而非物理像素数
- 若设计稿明确要求抗锯齿细线或局部半截线，
border-bottom就不合适，该换伪元素::after或 SVG
真正难的不是写那一行 border-bottom，而是判断它在哪种盒模型上下文中能稳稳停住、不晃、不塌、不糊。
