border-bottom等单边边框必须指定border-style才生效，仅设宽度和颜色无效；避免用border+none覆盖三边的反模式；inline元素需改display才能正常渲染边框；retina屏发虚可用0.5px或scaley(0.5)解决；单边边框仍参与盒模型计算。
border-bottom 等单边属性必须带 border-style 才生效
只写 border-bottom: 1px #000 不会显示边框——border-style 是必需项，缺了就等于没设。浏览器会忽略仅含宽度和颜色的声明。
-
border-bottom: 1px solid #000✅ 正确简写（宽+样式+色） -
border-bottom-width: 1px; border-bottom-color: #000❌ 缺border-bottom-style，不渲染 - 单独设
border-bottom-style: solid后，再补宽/色，也能生效，但没必要拆开
别用 border + none 覆盖来“砍掉”三边
写成 border: 1px solid #000; border-top: none; border-left: none; border-right: none; 看似可行，实际是反模式。
- 浏览器先画四边，再擦掉三边，白耗渲染资源
- CSS 优先级稍有变动，
none就可能被覆盖失效 - 在 Flex/Grid 中易引发宽度计算偏差，尤其当子项用
flex: 1时
inline 元素加 border-left 没反应？先改 display
像 span 这类默认 display: inline 的元素，垂直方向边框（border-top/border-bottom）不渲染，border-left 和 border-right 虽能画出，但常因行高或基线对齐“悬空”。
- 加
display: inline-block或display: block再设边框，行为可预期 - 若需保持行内流式布局，可用
vertical-align: top对齐基线 - 更稳妥的替代：用伪元素
::before绝对定位模拟单边，不干扰原始盒模型
Retina 屏上 border-bottom 发虚？不是 bug 是像素对齐问题
1px 在 2x 屏上实际占 2 物理像素，但浏览器居中渲染导致半像素模糊。这不是 border-bottom 特有，但单侧时更刺眼。
- 现代方案：
border-bottom: 0.5px solid #000（Chrome/Firefox/Safari 15.4+ 支持） - 兼容老 Safari：
@media (-webkit-min-device-pixel-ratio: 2)里用transform: scaleY(0.5)压缩 - 注意：0.5px 边框在非高清屏会不可见，需配合媒体查询兜底
border-bottom，也会让元素高度+2px（假设宽2px），在行内上下文或固定高度容器里，这 2px 往往就是布局错位的根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
