应直接使用 border-bottom 等单边属性，而非 border 后重置；它独立生效、不干扰其他边、性能更优、兼容性好，且天然适配 flex/grid 布局。
bottom-border 怎么只加底边框不带其他三边
直接用 border-bottom，别碰 border。很多人一写边框就下意识用 border: 1px solid #000，结果四边全出来，再想单砍掉上左右，只能靠重置，徒增冗余。
常见错误是写成：border: 1px solid #000; border-top: none; border-left: none; border-right: none;——这不仅多写了三行，还可能被后续 CSS 优先级干扰，更关键的是：浏览器要先画四边再擦掉三边，性能上白干一趟。
-
border-bottom是独立属性，支持所有边框特性：宽度、样式、颜色，比如border-bottom: 2px dashed red - 它不会影响
border-top/border-left/border-right的初始值（默认为none），天然干净 - 在 Flex 或 Grid 容器里，用
border-bottom比用border+ 覆盖更稳定，尤其当子元素有 margin 或 padding 时
left-border 在 flex item 里为啥不贴左？
不是 border-left 不生效，而是 flex 默认对齐方式让内容居中或拉伸，导致“看起来没贴边”。最典型场景：导航菜单项用 display: flex 包裹，每个 li 设了 border-left: 1px solid #eee，但第一条没边框、最后一条多了一条——其实是首项左边空、末项右边空，而边框老老实实画在了元素自身左边缘。
- 检查父容器是否用了
justify-content: space-between或center，这会让子项水平居中，border-left就悬在半空 - 想实现“分割线效果”，更稳妥的做法是给除第一项外的所有项加
border-left，用:not(:first-child)选择器 - 如果必须首项也带左线，说明你真正需要的是容器的
padding-left+ 子项border-left配合，而不是硬调对齐
border-top 和 border-bottom 同时用会撑高容器吗
会，但只在特定条件下：当元素是 inline 或 inline-block，且没有设置 box-sizing: border-box 时，上下边框会参与行高计算，导致父容器高度意外增加；块级元素通常不受影响。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：一段文字加了 border-top 和 border-bottom 后，前后行距变大，甚至换行错位。这不是 bug，是 CSS 行内格式化上下文（IFC）的正常行为。
- 解决方案很简单：给该元素加
box-sizing: border-box，强制边框计入宽高 - 或者改用
display: block（如果是 inline 元素），彻底脱离 IFC - 注意：
border-width值越大，撑高的风险越高；1px在多数字体大小下不易察觉，但3px就明显了
移动端 bottom-border 看起来模糊或发虚
本质是物理像素对齐问题。Retina 屏幕下，1px CSS 像素实际对应 2×2 物理像素，浏览器把 1px 边框“涂抹”在两个像素之间，导致抗锯齿模糊。这不是代码写错了，是渲染机制决定的。
别用 transform: scaleY(0.5) 这类 hack，它在不同缩放比例和设备上表现不稳定，尤其配合滚动或动画时容易闪动。
- 推荐方案：用
background-image模拟单边边框，比如background-image: linear-gradient(to bottom, #000 1px, transparent 1px)，高度设为1px - 或者用媒体查询判断 dpr：
@media (-webkit-min-device-pixel-ratio: 2)下改用border-bottom: 0.5px solid #000（部分新浏览器支持） - 更稳妥的做法：接受 1px 的轻微模糊，优先保证布局稳定；追求极致清晰时，改用 SVG 或 icon font 实现分割线
边框看着简单，但“单边”这个需求背后连着盒模型、渲染管线、设备适配三层逻辑。最容易被忽略的是：你以为在控制边框，其实是在协调浏览器怎么画像素。
