推荐使用figure+figcaption语义化结构，为figcaption添加边框样式；也可用绝对定位实现文字浮于图上带框效果；或用flex布局实现图文并列带框说明。
要在HTML中实现“带边框的文字说明”与图片组合排版，核心是把文字说明本身做成有边框的独立元素，并和图片合理布局。这不是给图片加边框，而是让说明文字自带边框，并通过CSS控制图文关系。以下是几种实用、语义清晰且兼容性好的做法：
用figcaption配合figure结构（推荐）
这是HTML5原生支持的语义化方案，适合图+说明的标准场景，边框加在说明文字容器上，结构干净、利于SEO和无障碍访问。
- 用
<figure>包裹<img>和<figcaption> - 给
<figcaption>设置边框样式，例如：border: 2px solid #3498db; padding: 8px 12px; background: #f8f9fa; - 可加
text-align: center;让文字居中，margin-top: 8px;控制与图片间距 - 整组默认垂直堆叠（图上文下），如需左图右文，再用flex微调
用绝对定位实现“文字浮于图上+边框”
适用于需要文字精准覆盖在图片某区域（如左上角标签、水印式说明）并带边框的场景。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 将
<img>和文字（如<div>或<span>）放在同一position: relative容器内 - 文字元素设为
position: absolute，用top/left定位 - 直接给该文字元素加边框：
border: 1px solid white; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; - 注意z-index确保文字在图片上方，必要时加
white-space: nowrap;防换行
用flex布局实现图文并列+带框说明
适合卡片式设计，比如产品图配右侧带边框说明栏，视觉平衡、响应友好。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; align-items: flex-start; - 左侧放
<img>（建议固定宽高或max-width: 100%） - 右侧放
<div>作为说明区，加边框：border: 1px solid #e0e0e0; padding: 12px; border-radius: 4px; - 可用
gap: 16px;控制图文间距，小屏时用媒体查询切为flex-direction: column
避免踩坑的关键点
- 不要用
<table>套边框来模拟图文排版——语义错误、维护困难 - 边框颜色要与背景有足够对比度，尤其文字在图片上时，建议加半透背景或文字阴影提升可读性
- 所有图片必须带
alt属性；若文字说明含关键信息，不要仅靠视觉呈现，必要时重复到aria-label或隐藏文本中 - 移动端务必测试边框是否溢出、文字是否折行，可用
word-break: break-word;或overflow-wrap: break-word;
