最简单可靠的方式是用css的border属性；html5已废弃img的border属性，须用css控制，推荐通过class统一管理样式，并注意display和box-sizing细节。
直接用 CSS 的 border 属性最简单可靠。HTML5 已废弃 img 标签的 border 属性（比如 <img border="1">），必须通过 CSS 控制。
一行代码就能实现
在 <img> 标签里加内联样式：
<img src="photo.jpg" style="max-width:90%">
其中：
1px 是边框粗细，可改用 2px、0.1rem 等；
solid 表示实线（不能省略，否则边框不显示）；
#ccc 是颜色，支持命名色（如 red）、十六进制、RGB 等。
更推荐用 class 统一管理
把样式抽到 CSS 中，便于复用和维护：
HTML：<img src="photo.jpg" class="img-border">
CSS：.img-border { border: 1px solid #999; }
这样以后改所有图片边框，只动这一行 CSS 就行。
只加某一边？也很容易
比如只要下边一条实线（常用于图文列表）：
.img-border-bottom { border-bottom: 2px solid #007bff; }
其他方向同理：border-top、border-left、border-right
注意两个小细节
• 如果图片是内联元素（默认 display: inline），上下边框可能被行高“吞掉”，加一句 display: block; 或 inline-block 更稳；
• 边框会增加图片总尺寸，若需保持宽高不变，建议加上：box-sizing: border-box;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
