用border-image无法直接嵌入文字，需html结构配合定位实现：外层relative容器内含图片和absolute定位的span文字标签，边框由伪元素背景图或border-image绘制，确保文字可选、可访问、响应式适配。
用 border-image 实现带文字注解的边框效果
纯 CSS 的 border-image 本身不支持直接叠加文字，所谓“带文字注解的精致边框”，实际得靠 HTML 结构 + 定位配合实现。核心思路是：图片边框用 border-image 或背景图绘制，文字注解作为独立元素（如 <span></span>）绝对定位在边框区域附近。
为什么不用 border-image-slice 直接塞文字
border-image-slice 只能切分图像像素，不能嵌入 HTML 内容或文本。试图把带文字的 PNG 当作边框图用，会导致文字缩放失真、响应式错位、高 DPI 下模糊——尤其当边框宽度变化时，文字会拉伸或裁切。
- 文字必须可选中、可访问、可被屏幕阅读器识别 → 得是真实 DOM 元素
- 文字需随字号缩放 → 不能 baked 进图片
- 多语言或动态文案场景下，图片方案完全不可维护
推荐结构：外层容器 + 边框图 + 文字标签
用一个 <div class="framed"> 包裹图片和文字标签，边框由伪元素或背景图模拟，文字用 <code><span class="caption"></span> 放在容器内部并定位。
<div class="framed"> @@##@@ <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 语言环境下的翻转行为。
