如何实现带边框容器的按钮组：按钮覆盖且激活时隐藏对应边框

可以通过相对定位和背景色覆盖的方式实现这个效果，完全用CSS+JSX就能搞定，不需要额外组件：

1. JSX结构（React） #

import { useState } from 'react';

const BorderedButtonGroup = () => {
  const [activeKey, setActiveKey] = useState('1');

  return (
    <div className="border-container">
      <div className="button-group">
        <button
          className={`tab-button ${activeKey === '1' ? 'active' : ''}`}
          onClick={() => setActiveKey('1')}
        >
          按钮1
        </button>
        <button
          className={`tab-button ${activeKey === '2' ? 'active' : ''}`}
          onClick={() => setActiveKey('2')}
        >
          按钮2
        </button>
        <button
          className={`tab-button ${activeKey === '3' ? 'active' : ''}`}
          onClick={() => setActiveKey('3')}
        >
          按钮3
        </button>
      </div>
      <div className="content">
        这里是内容区域
      </div>
    </div>
  );
};

export default BorderedButtonGroup;

2. CSS样式 #

/* 基础容器样式 */
.border-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
  background-color: #fff; /* 和按钮激活背景一致 */
  position: relative;
}

/* 按钮组容器 */
.button-group {
  position: absolute;
  top: -1px; /* 往上偏移1px，刚好覆盖容器的上边框 */
  left: 20px; /* 和容器内边距对齐 */
}

/* 单个按钮样式 */
.tab-button {
  border: 1px solid #ccc;
  border-bottom: none; /* 去掉按钮下边框，避免和容器边框重叠 */
  border-radius: 4px 4px 0 0;
  padding: 8px 16px;
  background-color: transparent;
  cursor: pointer;
  margin-right: 4px;
  position: relative;
  top: 1px; /* 往下偏移1px，让按钮底部和容器边框对齐 */
}

/* 激活状态按钮 */
.tab-button.active {
  background-color: #fff; /* 用容器背景色覆盖下方的容器边框 */
  border-color: #ccc;
}

/* 内容区域，避免被按钮遮挡 */
.content {
  margin-top: 16px;
}

效果说明 #

• 容器边框始终可见，按钮通过定位偏移覆盖在容器上边框位置
• 未激活按钮背景透明，容器边框会透过按钮显示
• 激活按钮用和容器一致的背景色，直接覆盖对应位置的容器边框，达成需求效果
• 按钮边框和容器边框颜色统一，视觉上更连贯

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