border-bottom能当分隔线用，因其是不占流空间、不触发重排的底部纯色线，位置稳定；需同时设1px、solid、currentColor三参数；须配padding-bottom控距；高DPI屏下可用scaleY(0.5)实现视觉1px。
border-bottom 为什么能当分隔线用
因为 border-bottom 本质就是元素底部的一条纯色线条，不占内容流空间、不触发重排，比用 <hr> 或空 <div> + <code>height 更轻量。它天然贴合盒模型的 border box 边界，位置稳定，不会因 padding/margin 晃动。
常见错误现象：border-bottom 看不见？大概率是父容器没设 overflow: hidden 且子元素浮动了，或者元素本身 height: 0 且没内容撑开 —— 它不是独立元素，依赖宿主盒子存在。
设置 border-bottom 分隔线的三个关键参数
只写 border-bottom 一行就能生效，但必须同时指定三部分：宽度、样式、颜色。缺一不可，否则无效。
-
border-bottom-width：常用1px，thin/medium兼容性差，别用 -
border-bottom-style：必须是solid（虚线dashed在高倍屏上易发虚，慎用） -
border-bottom-color：推荐用currentColor，自动继承文字色，主题切换时不用额外改
示例：border-bottom: 1px solid currentColor;
立即学习“前端免费学习笔记（深入）”；
和 padding-bottom 配合控制间距才自然
光有 border-bottom 线条太贴边，文字会“压线”。真正舒服的分隔效果，靠的是 padding-bottom 把内容和线拉开距离。
容易踩的坑：
- 用
margin-bottom代替padding-bottom：会导致相邻元素间出现双倍空白（margin 合并），且线的位置相对内容不固定 - 把
padding-bottom设太大又忘调line-height：多行文本可能视觉上“浮”在线条上方 - 在 flex 容器里对子项设
border-bottom，却忘了父项加align-items: flex-start：底线可能被垂直居中顶偏
响应式场景下 border-bottom 的兼容细节
在 Retina 屏或 Windows 高 DPI 下，1px 边框常渲染成 2 物理像素，显得粗。这不是 bug，是浏览器主动适配。
如果必须视觉上“真正 1px”，得用 transform 缩放：
border-bottom: 1px solid #ccc; transform: scaleY(0.5); transform-origin: bottom;
但要注意：transform 会让元素脱离文档流定位基准，若该元素本身参与布局（比如作为列表项），后续元素位置可能偏移；更稳妥的做法是接受浏览器的默认缩放行为 —— 用户其实不关心物理像素，只关心是否清晰、是否统一。
移动端还要留意：iOS Safari 对 border-bottom 在 position: fixed 元素上的渲染偶尔有闪烁，此时换成伪元素 ::after + bottom: 0 更稳。
