如何实现图片底部轻微重叠的类边框CSS样式（Bootstrap5）

针对你要实现的图片底部轻微重叠的彩色线条边框效果，结合Bootstrap 5的响应式特性，这里提供一个更灵活且适配的实现方案：

核心思路 #

放弃固定尺寸的border写法，改用伪元素+额外元素创建独立的彩色线条，通过绝对定位让线条从图片底部向上轻微重叠，同时保持响应式适配不同尺寸的图片。

完整代码实现 #

CSS 样式

/* 通用图片框架容器 */
.imageFrameLeft, .imageFrameRight {
  display: inline-block;
  position: relative;
  font-size: 0;
  /* 给线条预留空间，避免页面布局偏移 */
  margin-bottom: 1.5rem;
}

/* 左侧框架的彩色线条 */
.imageFrameLeft::after,
.imageFrameLeft::before,
.imageFrameLeft .extra-line {
  content: '';
  position: absolute;
  left: 0;
  height: 0.5rem;
  background-color: violet;
  /* 向上偏移，实现重叠图片的效果 */
  bottom: -0.75rem;
}

.imageFrameLeft::before {
  width: 100%;
}

.imageFrameLeft::after {
  width: 85%;
  bottom: -1.25rem;
}

.imageFrameLeft .extra-line {
  width: 70%;
  bottom: -1.75rem;
}

/* 右侧框架的彩色线条 */
.imageFrameRight::after,
.imageFrameRight::before,
.imageFrameRight .extra-line {
  content: '';
  position: absolute;
  right: 0;
  height: 0.5rem;
  background-color: navy;
  bottom: -0.75rem;
}

.imageFrameRight::before {
  width: 100%;
}

.imageFrameRight::after {
  width: 85%;
  bottom: -1.25rem;
}

.imageFrameRight .extra-line {
  width: 70%;
  bottom: -1.75rem;
}

HTML 结构

<div class="imageFrameLeft">
  <img class="img-fluid mr-5" src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg" alt="">
  <!-- 第三条线条用额外的span实现（也可以用第三个伪元素，这里更直观） -->
  <span class="extra-line"></span>
</div>

<div class="imageFrameRight">
  <img class="img-fluid mr-5" src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg" alt="">
  <span class="extra-line"></span>
</div>

关键细节说明 #

• 响应式适配：所有宽度使用百分比，线条会随图片宽度自动缩放，配合Bootstrap的img-fluid完美适配不同屏幕。
• 重叠效果：通过bottom: -xrem让线条向上偏移，覆盖在图片底部边缘，数值可根据需求调整重叠程度。
• 线条层级：通过不同的bottom值实现线条的错落感，模拟你需要的多层线条效果。
• 布局兼容：容器设置margin-bottom避免线条与下方内容重叠，保证页面布局正常。

你可以根据需求调整height（线条粗细）、background-color（线条颜色）、width（线条长度）和bottom（重叠距离）这些参数，快速匹配预期效果。

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