html - 如何使用 CSS 绘制具有特定样式的 Tabs（标签页）?

Question

CSS 如何画出下面这种Tab 样式

右侧那个弧度，该如何画，还需要考虑z-index问题

Answer 1

在CSS中绘制具有特定样式的Tabs（标签页）通常会涉及到多个CSS属性的组合，包括border、border-radius、background-color、box-shadow等。对于你提供的图片中的弧形Tab样式，你可以使用border-radius属性来创建弧形角，并使用position和z-index来处理Tabs之间的层次关系。

以下是一个简化的CSS样式示例，用于创建一个具有弧形角的Tab，并考虑z-index：

/* 假设你有HTML结构如下 */
.tabs {
  display: flex;
  align-items: flex-end; /* 底部对齐 */
  border-bottom: 1px solid #ccc; /* 底部边框 */
  padding-bottom: 10px; /* 底部内边距 */
  position: relative; /* 相对于此元素进行定位 */
}

.tab {
  /* 默认样式 */
  flex: 1; /* 等分空间 */
  text-align: center; /* 文本居中对齐 */
  padding: 10px; /* 内边距 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
  position: relative; /* 相对于此元素进行定位 */
  margin-right: 10px; /* 右侧外边距 */
  background-color: #fff; /* 背景色 */
  border: 1px solid #ccc; /* 边框 */
  border-bottom: none; /* 底部无边框 */
  border-top-left-radius: 5px; /* 左上角弧度 */
  border-top-right-radius: 5px; /* 右上角弧度 */
  z-index: 1; /* 初始z-index */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 选中状态的Tab */
.tab.active {
  background-color: #f0f0f0; /* 选中时的背景色 */
  border-bottom: 2px solid #007BFF; /* 底部边框加粗并变色 */
  margin-bottom: -1px; /* 底部外边距为负值，与底部边框重叠 */
  z-index: 2; /* 选中时的z-index更高 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 最后一个Tab的右侧弧形 */
.tab:last-child {
  border-top-right-radius: 20px; /* 加大右上角弧度 */
}

/* 如果需要的话，还可以添加hover状态样式 */
.tab:hover {
  /* hover时的样式 */
}

HTML 结构可能类似于：

<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <!-- 更多Tabs... -->
</div>

在这个示例中，.tab 类定义了Tab的基本样式，.tab.active 类定义了选中状态的样式，.tab:last-child 选择了最后一个Tab并修改了它的右上角弧度。position: relative; 和 z-index 用于处理Tabs之间的层次关系，以确保选中的Tab在视觉上位于其他Tabs之上。

请注意，这只是一个基本的示例，你可能需要根据你的具体需求进行调整。例如，你可能需要添加悬停（hover）效果，或者调整弧形的大小和位置。