如何用CSS实现嵌套直角边框？无需使用固定图片

完全可以用纯CSS实现这种嵌套直角边框，而且能完美适配不同大小的区块，下面提供两种实用方案：

方案一：伪元素实现（支持灵活调整单边框样式） #

这种方法通过元素的伪元素生成多层边框，能单独控制每层的颜色、宽度甚至样式（比如虚线）。

HTML结构 #

<div class="nested-border">
  这里放置你的内容
</div>

CSS代码 #

.nested-border {
  position: relative;
  padding: 24px; /* 预留足够空间给嵌套边框 */
  background-color: #fff;
  width: fit-content; /* 随内容自动适配宽度，也可设固定值 */
  min-width: 220px;
  min-height: 120px;
}

/* 第一层边框 */
.nested-border::before {
  content: "";
  position: absolute;
  inset: 4px; /* 控制与容器边缘的间距 */
  border: 2px solid #666;
  pointer-events: none; /* 避免干扰内容交互 */
}

/* 第二层边框 */
.nested-border::after {
  content: "";
  position: absolute;
  inset: 8px; /* 比第一层再缩进4px，形成嵌套效果 */
  border: 2px solid #000;
  pointer-events: none;
}

如果需要更多层嵌套，只需在容器内添加嵌套div，重复上述伪元素逻辑即可。

方案二：box-shadow内阴影实现（代码更简洁） #

利用多层内阴影快速实现嵌套边框，适合只需要实线边框的场景：

CSS代码 #

.nested-border {
  padding: 24px;
  background-color: #fff;
  width: fit-content;
  min-width: 220px;
  min-height: 120px;
  /* 每层阴影对应一层边框，偏移量控制间距 */
  box-shadow: 
    inset 4px 4px 0 0 #666, 
    inset -4px -4px 0 0 #666,
    inset 8px 8px 0 0 #000, 
    inset -8px -8px 0 0 #000;
}

两种方案都能自动适配容器的宽高变化，不管是内容撑开还是手动设置尺寸，嵌套边框都会同步调整。

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