您需要调节不同元素的z轴。请记住，您只能在元素本身具有位置集时修改z轴（例如：相对）
下面是一个工作示例。请注意，我还向当前活动标签添加了一个"活动"类。
您需要创建JavaScript来使其具有完整的功能，但这只是起点。
祝你好运!

body {
  background-color: rgb(245, 165, 61);
  --border-rad: 5px;
}

.wrapper {
  width: 80vh;
  margin: 5%;
}
.tabs {
  display: flex;
  justify-content: space-around;
}

.tab {
  position: relative;
  width: 20%;
  color: #000;
  background-color: #fff;
  margin: 2px 2px 0% 2px;
  border-top-left-radius: var(--border-rad);
  border-top-right-radius: var(--border-rad);
  position: relative;
  text-decoration: none;
  text-align: center;
}

.tab.active {
  z-index: 2;
}

.tab:before,
.tab:after {
  content: "";
  position: absolute;

  height: 10px;
  width: 20px;

  bottom: 0;
}

.tab:before {
  left: -20px;
  border-radius: 0 0 var(--border-rad) 0;
  box-shadow: var(--border-rad) 0 0 0 #fff;
}

.tab:after {
  right: -20px;
  border-radius: 0 0 0 var(--border-rad);
  box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}

.content {
  position: relative;
  z-index: 1;
  background-color: #fff;
  height: 75vh;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
}

<div class="wrapper">
      <div class="tabs">
        <span class="tab active">A</span>
        <span class="tab">B</span>
        <span class="tab">C</span>
      </div>
      <div class="content">content</div>
</div>

只需将这些添加到content和tab css类中即可：

.content {
      position: relative;
      z-index: 2;
    }

   .tab 
      z-index: 1;
    }

编辑：您需要relative定位才能使z-index工作。

你可以尝试下面的css巫婆将给予框的黑色阴影和边界底部你想要的。

box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;