CSS实现带边框透明div层叠 解决交叉区域边框穿透问题

请参考下方示例图：

需求说明 #

需要制作带方形Contact标题的联系信息容器，满足：

• Contact标题位于容器顶部居中位置，一半区域突出于容器外部
• 标题和容器均为透明背景、带有边框
  当前问题：容器边框会直接穿过Contact标题区域，无法去除标题覆盖范围内的容器边框。

原有实现代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

.profile {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

li {
  display: inline;
}

.contact {
  margin-bottom: 5px;
}

.container {
  border: 2px solid gray;
}

.contact {
  width: 40%;
  margin-top: -23px;
  border: 2px solid gray;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

h2 {
  font-size: 25px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.container {
  height: 380px;
}

.content {
  width: 400px;
  height: 70%;
  margin: 0 auto;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML

<div class="profile">
  <section class="container">
    <div class="header">
      <div class="contact">
        <h2>Contact</h2>
      </div>
    </div>
    <div class="content">
      <p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae distinctio libero repudiandae consequatur qui, vel ad error animi doloremque magni cupiditate officia officiis et? Vel voluptatem reiciendis placeat cumque officiis!</p>
    </div>
    <div class="social">
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Behance</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </div>

  </section>
</div>

实现方案 #

因为要求元素为透明背景，不能通过给标题加与页面同色背景的方式遮挡边框，直接使用HTML原生fieldset+legend标签组合即可实现需求，这组标签原生支持标题位置边框自动断开的效果，无需额外写遮挡逻辑，全主流浏览器兼容。

修改后完整代码 #

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 20px;
  /* 测试用格纹背景，验证透明效果，实际使用可删除 */
  background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), 
              linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.profile {
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

li {
  display: inline;
  margin: 0 8px;
}

/* 容器替换为fieldset，清除默认样式 */
.container {
  border: 2px solid gray;
  height: 380px;
  padding: 0;
}

/* 标题使用legend实现边框自动断开 */
.contact {
  width: 40%;
  border: 2px solid gray;
  /* 上移50%实现一半突出容器的效果 */
  transform: translateY(-50%);
  margin: 0 auto;
  background: transparent;
}

h2 {
  font-size: 25px;
  text-align: center;
  padding: 5px 0;
}

.content {
  width: 400px;
  height: 70%;
  margin: 20px auto 0;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
</style>

<div class="profile">
  <fieldset class="container">
    <legend class="contact">
      <h2>Contact</h2>
    </legend>
    <div class="content">
      <p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae distinctio libero repudiandae consequatur qui, vel ad error animi doloremque magni cupiditate officia officiis et? Vel voluptatem reiciendis placeat cumque officiis!</p>
    </div>
    <div class="social">
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Behance</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </div>
  </fieldset>
</div>

关键调整点 #

• 将原容器section标签替换为fieldset，原标题外层div替换为legend，利用原生特性实现边框在标题位置自动断开，无需额外遮挡
• 删除冗余的.header外层容器，给.contact设置transform: translateY(-50%)配合水平居中，即可实现标题半突出容器的效果
• 所有元素背景保持透明，即使页面有背景图、渐变等效果也不会出现穿帮
• 保留原有布局逻辑，仅调整标签和少量定位样式，改动量极小

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