如何用CSS实现双层偏移边框？解决边框层级与hover效果问题

我明白你遇到的困扰了——想让黑色的第二层边框落在灰色第一层边框的后方，但调整z-index时要么没效果，要么直接被section的灰色背景盖住，还要给边框加上hover交互。咱们一步步来解决：

核心问题分析 #

原来的.img-wrapper:before是.img-wrapper的子元素，而.img-wrapper设置了background: white，哪怕给伪元素设z-index: -1，也会被父元素的白色背景遮挡；要是把层级调得太低，又会被外层section的灰色背景盖过去。

解决方案：把第二层边框伪元素移到父级 #

我们可以把第二层边框的伪元素放到.img-wrapper的父元素（比如figure）上，这样它的层级能刚好落在.img-wrapper后方，又不会被section背景遮挡，还能轻松实现hover效果。

修改后的完整代码 #

<section style="background:#e9e9e9; padding: 2rem 0;">
  <div class="style-wrapper">
    <article>
      <a href="">
        <figure>
          <div class="img-wrapper">
            <img width="400" height="394" src="https://picsum.photos/200">
          </div>
          <figcaption>
            <h5>Sculpture</h5>
          </figcaption>
        </figure>
      </a>
    </article>
    <article>
      <a href="">
        <figure>
          <div class="img-wrapper">
            <img width="400" height="394" src="https://picsum.photos/200">
          </div>
          <figcaption>
            <h5>Sculpture</h5>
          </figcaption>
        </figure>
      </a>
    </article>
  </div>
</section>

.style-wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 2rem;
  padding: 0 1rem;
}
.style-wrapper article { 
  flex: 1 0 26%; 
  text-align: center; 
}
/* 第一层灰色边框 */
.style-wrapper article .img-wrapper { 
  border: 5px solid #aaaaaa; 
  padding: 5px; 
  background: white; 
  position: relative;
  z-index: 1; /* 确保第一层边框在第二层上方 */
}
/* 第二层黑色边框，挂载到figure上 */
.style-wrapper article figure {
  position: relative;
  display: inline-block; /* 让伪元素跟随内容宽度自适应 */
}
.style-wrapper article figure:before {
  content: ""; 
  display: block; 
  width: 100%; 
  height: 100%; 
  border: 5px solid black; 
  position: absolute; 
  bottom: -15px; 
  right: -15px; 
  background: transparent; /* 透明背景，不会遮挡section */
  z-index: 0; /* 层级低于.img-wrapper的z-index:1 */
  transition: all 0.3s ease; /* 为hover效果添加平滑过渡 */
}
/* hover交互效果：改变边框颜色与位置 */
.style-wrapper article:hover figure:before {
  border-color: #ff4444;
  bottom: -10px;
  right: -10px;
}

关键调整点说明 #

• 将第二层边框的伪元素从.img-wrapper移到figure上，给figure设置position: relative作为伪元素的定位容器
• 给.img-wrapper设z-index:1，伪元素设z-index:0，确保灰色边框始终在黑色边框上方
• 伪元素用background: transparent，避免遮挡后方的section背景
• 添加transition属性和hover规则，实现流畅的交互反馈

这样调整后，双层边框的层级关系就完全正确了，hover效果也能正常工作～

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