使用纯css实现，两个相邻的tab标签，中间有弧度分开

可以使用伪元素 `::before` 和 `::after` 来实现两个相邻的标签之间的弧度效果。

首先，我们需要定义两个相邻的标签的样式：

<div class="tab-container">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
</div>

.tab-container {
  display: flex;
}

.tab {
  padding: 10px 20px;
  background-color: #ccc;
  border: 1px solid #999;
  border-bottom: none;
  position: relative;
}

.tab.active {
  background-color: #fff;
}

.tab::before,
.tab::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 20px;
  background-color: #ccc;
  z-index: -1;
}

.tab::before {
  left: -10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.tab::after {
  right: -10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

这里的 `.tab` 类是表示标签的样式，`.tab.active` 表示当前选中的标签。我们使用了 `position: relative` 来让伪元素相对于标签本身进行定位，并使用 `z-index` 来使它们在标签后面。

然后，我们为 `.tab::before` 和 `.tab::after` 定义样式。它们的 `content` 属性是必需的，即使我们不需要显示任何内容。接着，我们使用 `position: absolute` 来使它们相对于 `.tab` 进行定位，使用 `height: 100%` 来让它们的高度与 `.tab` 相同，使用 `width` 来控制它们的宽度。

在 `.tab::before` 中，我们使用 `left: -10px` 来将它向左移动，并使用 `border-top-right-radius` 和 `border-bottom-right-radius` 来定义右侧的弧度。在 `.tab::after` 中，我们使用 `right: -10px` 来将它向右移动，并使用 `border-top-left-radius` 和 `border-bottom-left-radius` 来定义左侧的弧度。

这样，我们就可以实现两个相邻标签之间的弧度分开效果了。