用 border-bottom 属性可实现图片底边框，内联写法为 style="border-bottom: 2px solid #999;"，推荐类名方式统一管理，并注意 vertical-align、overflow 和 padding 等细节。

直接用 CSS 的 border-bottom 属性就能实现，只加底边、灰色、实线，简洁又精准。

最简写法（内联样式）

在 标签里加 style：

说明：
• 2px 是边框粗细（可调为 1px、3px 等）
• solid 表示实线，不能省略
• #999 是标准灰色（等价于 #999999），也支持 gray、rgb(153,153,153)

推荐写法（类名 + 外部/内部 CSS）

HTML 中：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

CSS 中（例如放在

.bottom-border { border-bottom: 1px solid #888; }

好处：
• 同一类名可复用于多张图片
• 方便统一调整颜色、粗细或加过渡效果
• 避免内联样式污染 HTML 结构

注意几个实用细节

• 图片默认是 display: inline，底边框会紧贴文字基线；如需更稳的垂直对齐，建议加 vertical-align: middle 或 display: block
• 若底边框看起来“太低”或被截断，检查父容器是否设置了 overflow: hidden，或图片外层有未清除的浮动
• 想让底边框离图片内容留点空隙？加 padding-bottom: 4px（注意：这会让图片整体高度增加）
• 灰色可选范围：#ccc（浅灰）、#999（中灰）、#666（深灰），按页面整体色调选即可

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！