实现fieldset下边框覆盖内部内容且层级低于内容的效果

我明白你想要的效果——让fieldset的下边框看起来"压"在内部内容区域，但实际内容又能在边框上方显示，形成一种内容穿透边框的视觉感。这确实没法直接用fieldset的默认边框实现，因为默认边框和内部元素是同一层级的，不过咱们可以用伪元素和定位来搞定这个需求。

核心实现思路 #

• 放弃fieldset的默认完整边框，改用伪元素单独创建下边框，这样能精准控制它的层级和位置
• 给fieldset设置position: relative，让伪元素可以基于它进行绝对定位
• 给内部的.circles元素设置相对定位和更高的z-index，确保内容能显示在伪元素边框的上方
• 调整伪元素的尺寸、位置和样式，让它看起来就像fieldset的下边框，同时覆盖内部内容的底部区域

修改后的CSS代码 #

fieldset {
  margin-left: 80px;
  margin-right: 80px;
  padding-bottom: 50px;
  /* 去掉默认完整边框，如需保留其他方向边框，单独设置top/left/right */
  border: none;
  /* 示例：如果需要保留上、左、右边框，可添加以下代码
  border-top: 5px dotted rgb(88, 85, 86);
  border-left: 5px dotted rgb(88, 85, 86);
  border-right: 5px dotted rgb(88, 85, 86);
  */
  position: relative; /* 为伪元素定位提供参照 */
}

/* 用伪元素创建可控制层级的下边框 */
fieldset:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px; /* 和原边框宽度保持一致 */
  border: 5px dotted rgb(88, 85, 86);
  box-sizing: border-box;
  z-index: 1; /* 设置较低层级，让内容能覆盖它 */
}

label {
  float: left;
  width: 25%;
  margin-right: 0.5em;
  padding-top: 0.2em;
  text-align: right;
  font-weight: bold;
}

legend {
  padding: 0.2em 0.5em;
  max-width: 475px;
  color: rgb(88, 85, 86);
  text-align: center;
  font-family: 'gotham-book';
  font-size: 32px;
}

/* 提升内部圆形元素的层级，确保显示在边框上方 */
.circles {
  position: relative;
  z-index: 2;
}

/* 保留你原有各个圆形元素的样式，比如circle-yellow、circle-red等 */

HTML代码（无需修改） #

<form>
 <fieldset>
 <legend>Veja como é fácil participar</legend>
 <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12" style="margin-left: 9%">
 <div class="circles circle-yellow">
 <img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
 <p class="yellow-texto"> Mensalidades que cabem no seu bolso </p>
 </div>
 </div>
 <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
 <div class="circles circle-yellow">
 <h1 class="yellow-parcelas">12x</h1>
 <p class="yellow-texto"> parcelas iguais </p>
 </div>
 </div>
 <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
 <div class="circles circle-red">
 <span class="red-span">R$</span>
 <h1 class="red-parcelas">162</h1>
 <p class="red-texto"> mensais </p>
 <small class="red-small">R$ 1.944,00 ANUAL</small>
 </div>
 </div>
 <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
 <div class="circles circle-light-blue">
 <span class="light-blue-span">R$</span>
 <h1 class="light-blue-parcelas">37</h1>
 <p class="light-blue-texto"> mensais </p>
 <p class="light-blue-texto"> material </p>
 <p class="light-blue-texto"> didático </p>
 <small class="light-blue-small">R$ 444,00 ANUAL</small>
 </div>
 </div>
 <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
 <div class="circles circle-dark-blue">
 <div class="dark-blue-texto">total</div>
 <span class="dark-blue-span">R$</span>
 <h1 class="dark-blue-parcelas">162</h1>
 <p class="dark-blue-texto"> mensais </p>
 <small class="dark-blue-small">R$ 1.944,00 ANUAL</small>
 </div>
 </div>
 </fieldset>
</form>

额外调整提示 #

• 如果想让边框位置上下移动，可以修改伪元素的bottom属性值（比如bottom: 10px）
• 若需要调整边框的宽度或样式，直接修改伪元素的border属性即可
• 确保.circles的z-index始终大于伪元素的z-index，避免内容被边框遮挡

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