必须用相对定位容器包裹图片，再通过::before和::after伪元素在四角绝对定位透明png或内联svg花纹图，配合content: ""、background-image及精确top/bottom/left/right值实现，避免遮图与错位。
用 CSS 边框 + 伪元素实现四角花纹装饰
直接在图片四角加复古花纹，HTML 本身不支持图形装饰，得靠 CSS 配合小图或 SVG。最稳妥的做法是用 ::before 和 ::after 伪元素在容器四角绝对定位贴图——不用改 HTML 结构，也避免额外 DOM 节点干扰布局。
- 把图片包进一个
<div class="frame"><img src="..."></div>容器里，给.frame设position: relative - 用两个伪元素分别覆盖左上、右上角（
::before），另两个用::after覆盖左下、右下角，共四个定位点 - 花纹图推荐用透明背景的 PNG（如
corner-flourish-tl.png），尺寸控制在 40–60px，太大易遮图，太小不显眼 - 关键样式：每个伪元素设
content: ""、position: absolute、width/height、background-image，再用top/bottom/left/right精确定位到角上（例如左上：top: 0; left: 0;）
用 SVG 内联绘制花纹，免加载外部资源
如果不想依赖外部图片、追求更高兼容性和缩放质量，直接把复古花纹写成内联 SVG，作为伪元素的 background-image 值。这样所有内容都在 HTML/CSS 里，部署简单，也不怕图片 404。
- 找一个简洁的卷草纹或巴洛克角饰 SVG 路径（可用 Figma 或 Illustrator 导出精简版），删掉多余属性，只留
<path d="..."></path> - 转义后塞进 CSS：
background-image: url("data:image/svg+xml,%3Csvg ... %3C%2Fsvg%3E");（注意空格和引号要 URL 编码） - SVG 尺寸通过
background-size控制（如48px 48px），用background-repeat: no-repeat确保只显示一次 - 注意 IE 不支持 data URI 的 SVG，如需兼容旧浏览器，退回 PNG 方案
避免图片被花纹裁切或错位的定位技巧
常见问题是花纹盖住图片边缘，或者响应式缩放后位置偏移。根源在于没处理好容器尺寸关系和定位基准。
-
.frame容器必须设display: inline-block或明确宽高，否则position: relative对子元素定位失效 - 伪元素的
top: 0是相对于容器内容盒（content box），不是边框；若容器有padding，花纹会往里缩，应改用inset: 0或手动减去 padding 值 - 响应式场景下，用
vw或clamp()控制花纹大小（如width: clamp(24px, 3vw, 48px)），比固定像素更稳 - 图片设
display: block，防止底部默认留白导致容器高度异常，影响下角定位
Firefox 下伪元素 background-image 不显示？检查 MIME 类型
Firefox 对 data URI 的 SVG 有更严格的 MIME 检查，如果内联 SVG 花纹在 Firefox 里不显示，大概率是 URL 编码漏了 %3Csvg 开头或没声明 xmlns。
- 确保 SVG 字符串以
%3Csvg xmlns='http://www.w3.org/2000/svg'开头（单引号包裹 namespace） - 整个 data URI 用双引号包裹 CSS 值，且内部引号全部转义为
%22 - 快速验证法：把编码后的字符串粘到浏览器地址栏，看能否正常渲染 SVG；不能则说明编码有问题
- 实在搞不定，临时方案：用
@supports (-moz-appearance: none)单独给 Firefox 加载 PNG 版本
四角花纹看着琐碎，其实核心就三点：容器定位锚点清晰、伪元素坐标精准、资源格式兼容到位。最容易忽略的是容器 box-sizing 默认值带来的 padding 影响，一不留神花纹就“陷进去”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
