直接用 border 属性即可实现淡灰色实线外框：内联样式为 style="border: 1px solid #ccc;"，推荐使用 CSS 类 .grey-border 统一管理，并可配合 padding 或 margin 增加留白，同时清除图片默认下划线以避免干扰。

直接用 border CSS 属性就能实现淡灰色实线外框，不需要额外标签或复杂样式。

用内联样式快速加框

在 标签里加 style 属性：

#ccc 是标准淡灰色（RGB 204,204,204），1px 是线宽，solid 表示实线。

用 CSS 类统一管理（推荐）

在 里写样式，HTML 中只加类名，更清晰易维护：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

可选：加点留白让边框更自然

单独加 border 会让图片紧贴文字或容器边缘，建议顺手加点内边距：

• 用 padding: 2px; 在边框和图片内容间留小空隙
• 或用 margin: 4px; 让边框和周围元素保持距离
• 组合写法：style="border: 1px solid #ccc; padding: 2px;"

注意：避免和默认样式冲突

部分浏览器会给图片加下划线（尤其带链接时），可一并清除：

img { border: none; vertical-align: middle; }
.grey-border { border: 1px solid #ccc; }

这样既去除了干扰线，又确保边框稳定显示。

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