伪元素图片边框不显示或错位，主因是默认 inline 无宽高且未脱离文档流；须设 display: block、显式宽高、content: ""，并用 position: absolute 配合父容器 relative 定位。
用 ::before 或 ::after 叠加图片边框时，图片不显示或错位
常见现象是加了伪元素、设置了 background-image，但图片压根没出来，或者只显示左上角一小块。根本原因是伪元素默认是 inline 级别，没有宽高，且未脱离文档流——得手动设 display: block 和显式 width/height，否则背景图无处可渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须设
content: ""（哪怕为空）才能触发渲染 - 用
position: absolute配合父容器position: relative控制定位，避免影响原内容流 - 若想让边框“包住”原图，推荐在图片容器（如
<div>）上加伪元素，而不是直接作用于 <code><img alt="CSS伪元素实现图片边框装饰_利用图片边框与偏移量" >标签（后者不支持伪元素） - 偏移量用
top/left调整，但注意：负值会让伪元素超出容器，需配合z-index确保层级正确 - 如果要实现“边框图片从四边向内缩进 4px”，用
background-position: 4px 4px更直观 - 如果要做“边框整体浮起 2px 并带阴影”，选
transform: translate(0, -2px)，它不会挤压内容，且动画更流畅 - 注意
transform会触发新层叠上下文，可能意外遮挡相邻元素，必要时加z-index - IE10+ 支持
transform，若需兼容 IE9，只能退回到top/left+position - 不要用单张大图强行拉伸，优先拆成 9 宫格：4 个角 + 4 条边 + 1 个中心（即使中心透明）
- 用
background-image分别设置::before（上边+左边）和::after（右边+下边），再用background-position精确定位各段 - 若坚持单图平铺，确保图片宽度 = 左/右边框宽度 × 2，高度 = 上/下边框高度 × 2，并用
background-size: contain防止失真 - 平铺类边框在高 DPR 屏幕上容易模糊，记得提供 2x 切图并用
image-set()或媒体查询切换 - 避免对伪元素直接使用
transform: scale()，改用zoom（仅 Safari/Chrome 支持）或 JS 监听resize动态重设background-size - 旋转场景下，优先用真实
<img alt="CSS伪元素实现图片边框装饰_利用图片边框与偏移量" >标签替代伪元素，哪怕多一个 DOM 节点——它的渲染一致性远高于伪元素 - 若必须用伪元素，把
background-size设为固定像素值（如16px 16px），禁用cover/contain，靠background-repeat和定位补足 - 安卓 WebView 对
::after的background-image支持不稳定，测试时务必用真机抓chrome://inspect
background-position 和 transform: translate() 哪个更适合控制图片边框偏移
两者都能移动背景图，但语义和行为完全不同：background-position 是背景图在容器内的锚点位移，适合微调贴图对齐；transform: translate() 是整个伪元素的视觉位移，不影响布局尺寸，更适合做“悬浮式”边框装饰（比如让边框略高于图片本体）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
多张图片边框拼接时，background-repeat 与切图方式怎么配
想用一张小图平铺出完整边框，常遇到接缝错位、拐角变形。问题不在 CSS，而在图片本身是否按“可平铺边框”规范切图：横边、竖边、四个角必须分离，否则 repeat-x/repeat-y 无法独立控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
伪元素图片边框在移动端缩放或旋转后变形
用户 pinch-zoom 或页面强制 rotate 时，伪元素的背景图常出现锯齿、拉伸或定位漂移。这不是 CSS 错误，而是浏览器对伪元素的变换处理不如真实 DOM 元素稳定，尤其涉及 background-size: cover 时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
最麻烦的其实是设计师给的边框图没留透明间隙，导致平铺时硬拼接——这时候再调 CSS 也没用，得回去改图。
