17370845950

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 才影响下边框两端弧度