如何结合边框设计与Box Model实现预期界面效果？

核心问题在于当前圆形边框属于图片元素且嵌套在灰色容器内部，要实现预期的外部边框效果，需将圆形边框脱离灰色容器的Box Model，作为独立装饰元素定位在容器外部上方。以下是两种可行的调整方案：

方法一：CSS伪元素实现（推荐，无需额外HTML元素） #

通过父容器的伪元素创建圆形边框，定位到灰色容器顶部中心，无需新增HTML标签，代码更简洁。

修改后代码 #

.main {
  width: 450px;
  height: 400px;
  display: flex;
  flex-direction: row;
}

.main-cases {
  width: 150px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: column;
}

.main-cases-div {
  border-radius: 10px;
  background-color:#E2E2E2; 
  height: 70px; 
  width: 120px; 
  margin-top: 7%; 
  margin-left: 10%;
  position: relative; /* 为伪元素提供定位基准 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px; /* 顶部预留图片位置 */
}

/* 新增伪元素实现外部圆形边框 */
.main-cases-div::before {
  content: '';
  position: absolute;
  top: -15px; /* 向上偏移，使边框处于容器外部 */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #F7F7F7;
  background-color: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smaller-image {
  width: 24px; /* 缩小图片适配伪元素内部 */
  border-radius: 50%;
}

.p {
  padding-bottom: 15px; 
  text-align: center; 
  font-size: 13px; 
  font-weight: bold; 
  color: #0E71B0;
  margin: 0; /* 清除默认边距 */
}

<div class="main-cases-div">
  <img class="smaller-image" src="assets/images/data8logo.png">
  <p class="p">Use<br> cases</p>
</div>

方法二：独立HTML元素定位 #

若需要更灵活的样式控制，可新增独立容器承载圆形边框，通过绝对定位放置在灰色容器外部。

修改后代码 #

<div class="main-cases">
  <div class="cases-wrapper">
    <div class="outer-circle-border">
      <img class="smaller-image" src="assets/images/data8logo.png">
    </div>
    <div class="main-cases-div">
      <p class="p">Use<br> cases</p>
    </div>
  </div>
</div>

.main {
  width: 450px;
  height: 400px;
  display: flex;
  flex-direction: row;
}

.main-cases {
  width: 150px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: column;
  align-items: center;
}

.cases-wrapper {
  position: relative;
  margin-top: 7%;
}

.outer-circle-border {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #F7F7F7;
  background-color: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-cases-div {
  border-radius: 10px;
  background-color:#E2E2E2; 
  height: 70px; 
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.smaller-image {
  width: 24px;
  border-radius: 50%;
}

.p {
  padding-bottom: 15px; 
  text-align: center; 
  font-size: 13px; 
  font-weight: bold; 
  color: #0E71B0;
  margin: 0;
}

关键调整说明 #

• 定位基准：给父容器设置position: relative，让边框元素可基于父容器进行绝对定位。
• 偏移控制：通过top: -15px（数值等于圆形边框高度的一半），让边框刚好卡在灰色容器顶部中心，实现外部悬浮效果。
• 清理冗余样式：移除原图片的.thick-border类，避免边框嵌套在容器内部。

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