border-bottom可单独设置下边框，复合写法如border-bottom: 2px solid #333；需修改单项时用border-bottom-width/style/color；清除推荐border-bottom: none；与其他边框共存时后者覆盖前者，注意box-sizing和border-radius的适用性。
直接用 border-bottom 属性就能单独设置下边框，无需操作其他三边，简洁高效。
基础写法：颜色、粗细、线型一步到位
border-bottom 是复合属性，可同时定义宽度、样式和颜色：
- border-bottom: 2px solid #333; —— 2像素宽、实线、深灰色
- border-bottom: 1px dashed #e0e0e0; —— 虚线分隔效果常用
- border-bottom: 0.1rem dotted #999; —— 响应式项目中推荐用 rem 单位
只改某一项？用独立子属性更灵活
当只需调整颜色或粗细（比如 hover 时变色），用细分属性避免重复书写：
- border-bottom-width: 3px;
- border-bottom-style: double;
- border-bottom-color: #ff6b6b;
注意：单独设置其中一项时，其余两项会使用浏览器默认值（通常是 medium none currentColor），所以务必确保 border-bottom-style 不为 none，否则边框不显示。
立即学习“前端免费学习笔记（深入）”；
清除下边框？设为 none 最可靠
想移除已有下边框，不要只写 border-bottom: 0;（它等价于 0 none currentColor，虽能隐藏但语义不清），推荐明确写：
- border-bottom: none; —— 清晰表达“无下边框”
- 或者重置为透明：border-bottom-color: transparent;（保留宽度和样式，仅视觉隐藏）
配合其他边框使用时的注意事项
如果元素已设了 border: 1px solid #ccc;，再单独加 border-bottom，后者会完全覆盖原下边框（CSS 层叠规则），无需担心冲突。但要注意：
- 盒模型中，border 会增加元素总高度，若需精确控制尺寸，记得考虑
box-sizing: border-box; - 圆角
border-radius对单边边框无效，border-bottom-left-radius和border-bottom-right-radius才影响下边框两端弧度
