如何实现含5个tab项的tabbar，使中间第3个tab突出于tabbar角落外

核心实现思路 #

• 外层tab bar容器不要设置overflow: hidden，允许子元素超出父容器边界显示
• 给第三个tab单独设置特殊样式：高度高于其余4个普通tab，通过transform: translateY(-xx)或者负margin-top让它向上偏移，突出于tab bar顶部
• 其余普通tab保持常规高度，和tab bar底部对齐即可
• 凸起的中间tab如果需要圆形、阴影等效果，单独加对应样式即可

原生HTML/CSS最小实现示例 #

<div class="tab-bar">
  <div class="tab-item">首页</div>
  <div class="tab-item">分类</div>
  <div class="tab-item tab-center">发布</div>
  <div class="tab-item">消息</div>
  <div class="tab-item">我的</div>
</div>

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  /* 禁止设置 overflow: hidden */
}
.tab-item {
  flex: 1;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
}
.tab-center {
  height: 70px;
  width: 70px;
  transform: translateY(-10px);
  background: #2f80ed;
  color: #fff;
  border-radius: 50%;
}

多场景适配方案 #

• 移动端UI库（Vant、Ant Design Mobile等）：使用官方提供的自定义tab bar插槽，替换中间tab为自定义组件，给自定义组件添加上述偏移、高宽样式即可
• Flutter：给中间的BottomNavigationBarItem套Transform组件做Y轴偏移，Scaffold的bottomNavigationBar不要设置裁剪属性
• 小程序：自定义tab bar时给中间项加偏移样式，注意tab bar容器不要加overflow:hidden

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