用border-image无法直接嵌入文字，需HTML结构配合定位实现：外层relative容器内含图片和absolute定位的span文字标签，边框由伪元素背景图或border-image绘制，确保文字可选、可访问、响应式适配。

用 border-image 实现带文字注解的边框效果

纯 CSS 的 border-image 本身不支持直接叠加文字，所谓“带文字注解的精致边框”，实际得靠 HTML 结构 + 定位配合实现。核心思路是：图片边框用 border-image 或背景图绘制，文字注解作为独立元素（如 <span>）绝对定位在边框区域附近。

为什么不用 border-image-slice 直接塞文字

border-image-slice 只能切分图像像素，不能嵌入 HTML 内容或文本。试图把带文字的 PNG 当作边框图用，会导致文字缩放失真、响应式错位、高 DPI 下模糊——尤其当边框宽度变化时，文字会拉伸或裁切。

• 文字必须可选中、可访问、可被屏幕阅读器识别 → 得是真实 DOM 元素
• 文字需随字号缩放 → 不能 baked 进图片
• 多语言或动态文案场景下，图片方案完全不可维护

推荐结构：外层容器 + 边框图 + 文字标签

用一个 <div class="framed"> 包裹图片和文字标签，边框由伪元素或背景图模拟，文字用 <span class="caption"> 放在容器内部并定位。

<div class="framed">
  <img src="photo.jpg" alt="风景照">
  <span class="caption">阿尔卑斯山 · 2024 夏</span>
</div>

对应 CSS 关键点：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• .framed 设 position: relative，为文字定位提供上下文
• 用 ::before 伪元素铺一层带装饰边角的 PNG 边框图（background-image），或直接用 border-image 加固定宽高适配图
• .caption 设 position: absolute，例如 bottom: -24px; left: 50%; transform: translateX(-50%);
• 边框图建议尺寸：120×120px（含四个角+四条边的九宫格切图），border-image-slice: 30 fill 保证角落不拉伸

容易被忽略的细节

真正影响“精致感”的不是边框图多华丽，而是对齐精度和语义健壮性：

• 文字 font-size 建议用 rem 或 em，避免在缩放页面时与边框图脱节
• 边框图若含阴影或渐变边缘，务必在 border-image-outset 或伪元素 z-index 上做分层，防止遮挡文字
• 移动端需检查文字是否溢出容器，加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 更稳妥
• 如果边框图是 SVG，记得设 preserveAspectRatio="xMidYMid slice"，否则在非等比缩放下会留白或裁切

边框图越复杂，越要先验证它在不同 border-width 下是否仍能对齐；文字位置越靠近边角，越要测试 RTL 语言环境下的翻转行为。