如何为CMS生成的图片添加左移下移的后置次级边框

因为没法修改CMS生成的HTML，你可以利用父元素的伪元素来实现这个效果——用伪元素创建边框，通过定位和层级控制让它跑到图片后方并偏移，具体CSS代码如下：

.field__item {
  position: relative;
  /* 给父元素加内边距，避免边框顶到容器边缘 */
  padding: 8px;
  display: inline-block; /* 让父元素宽度自动适配图片 */
}

.field__item::before {
  content: '';
  position: absolute;
  top: 12px; /* 向下偏移距离，可按需调整 */
  left: 12px; /* 向左偏移距离，可按需调整 */
  width: 100%;
  height: 100%;
  border: 3px solid red; /* 红色边框，粗细可修改 */
  z-index: -1; /* 把边框压在图片后方 */
}

/* 确保图片层级高于边框 */
.field__item img {
  position: relative;
  z-index: 1;
}

关键细节说明： #

• 给.field__item设置position: relative，是为了让伪元素的绝对定位以它为参照基准
• display: inline-block让父元素不会占满整行，宽度会自动跟随图片尺寸变化
• 调整top和left的数值就能控制边框偏移幅度，数值越大偏移效果越明显
• z-index的层级设置是核心：伪元素设为-1，图片设为1，就能实现边框在图片后方的视觉效果
• 如果图片是响应式的，这套代码也能适配，因为伪元素的宽高是父元素的100%，会跟着图片自动缩放

内容的提问来源于stack exchange，提问作者nathan111777