如何设置指定图片为div边框且边框位于盒外不增加盒子尺寸

核心调整点 #

• 移除原.item类中无效的border相关配置
• 新增绝对定位的伪元素承载边框图片，脱离文档流不影响原有盒子尺寸
• 补全border-image的切片、平铺参数，保证边框渲染正常
• 适配不定高场景：伪元素通过四边偏移量自动适配父容器尺寸

完整调整后代码 #

CSS代码 #

.container {
  display: flex;
  justify-content: space-around;
  /* 可选：给容器加足够的内边距，避免向外延伸的边框被裁剪 */
  padding: 30px;
}

.product1 {
  width: 200px;
  height: 500px;
  background-color: blue;
}
.product2 {
  width: 200px;
  height: 550px;
  background-color: green;
}
.product3 {
  width: 200px;
  height: 520px;
  background-color: red;
}
.item {
  position: relative;
}
/* 边框承载伪元素 */
.item::before {
  content: "";
  position: absolute;
  /* 四边各向外延伸20px放置边框 */
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border: 20px solid transparent;
  /* 20为边框图片切片值，和边框宽度对应，round参数让边框自动适配长度不截断 */
  border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1") 20 round;
  /* 避免边框挡住原div的点击、hover等交互 */
  pointer-events: none;
  /* 按需调整层级，-1为边框在内容下方，1为在内容上方 */
  z-index: -1;
}

HTML代码 #

<div class="container">
  <div class="product1 item">
  123
  </div>
  <div class="product2 item">
  123
  </div>
  <div class="product3 item">
  123
  </div>
</div>

效果说明 #

该实现完全满足需求：

1. 边框渲染在盒子外部，伪元素脱离文档流不会改变原有div的尺寸，也不会影响页面布局
2. 自动适配不同高度的div，无需针对不同高度做单独配置
3. border-image的round参数保证边框图片适配任意长度，不会出现断裂或变形

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