如何实现与示例完全一致的tabBar（含设计与边框细节）

数据老陈

2026-6-24

实现匹配示例的TabBar样式

从你提供的示例TabBar来看，它具备这些核心特征：底部有统一的分隔边框，未选中项为常规灰色文字，选中项为高亮色文字并带有底部短下划线，所有Tab项均分宽度横向排列。以下是完整的代码实现，可直接复用并微调参数以完全匹配设计：

HTML结构

<div class="tab-bar">
  <button class="tab-item active">首页</button>
  <button class="tab-item">分类</button>
  <button class="tab-item">我的</button>
</div>

CSS样式

/* TabBar容器 */
.tab-bar {
  display: flex;
  border-bottom: 1px solid #e5e7eb; /* 匹配示例的底部分隔边框 */
  background: #fff;
  padding: 0;
  margin: 0;
}

/* Tab项基础样式 */
.tab-item {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 14px;
  color: #6b7280; /* 未选中文字颜色 */
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

/* 选中态样式 */
.tab-item.active {
  color: #2563eb; /* 选中文字高亮色，可根据示例调整 */
  font-weight: 500;
}

/* 选中态底部下划线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* 与容器边框对齐，避免双重线条 */
  left: 50%;
  transform: translateX(-50%);
  width: 28px; /* 下划线宽度，匹配示例长度 */
  height: 2px;
  background: #2563eb; /* 下划线颜色与选中文字一致 */
  border-radius: 1px;
}

/* 鼠标悬浮效果（可选） */
.tab-item:hover:not(.active) {
  color: #4b5563;
}