CSS Tab样式实现：仅激活状态按钮无底部下划线效果

解决方案 #

核心原理是给父容器加全局底部边框，再用激活标签的背景盖住对应位置的边框即可，只需修改CSS部分，HTML和TS代码无需改动：

修改后完整CSS代码

.tab {
    background-color: white;
    height: 4vh;
    margin-top: 1vh;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
    /* 新增：全局底部边框，实现整栏下划线效果 */
    border-bottom: 1px solid lightgray;
    /* 去掉原有的overflow:hidden，避免按钮下移后被裁剪 */
}
.tab button {
    border-radius: 2px;
    background-color: inherit;
    height: 100%;
    margin-left: 4px;
    margin-right: 4px;
    border: 1px solid transparent;
    /* 可选：加cursor:pointer优化交互体验 */
    cursor: pointer;
}
.tab button.active {
    border-radius: 2px;
    border: 1px solid lightgray;
    color: rgb(72, 115, 255);
    border-bottom: 0;
    /* 新增：相对定位下移1px，用白色背景盖住父容器的底部边框 */
    position: relative;
    bottom: -1px;
    background-color: #fff;
}

改动说明

• 给.tab容器加1px浅灰色底部边框，实现整个标签栏的下划线效果，同时删除原有的overflow: hidden属性，避免按钮下移后被裁剪
• 给激活态的.tab button.active加相对定位，向下偏移1px，同时保留白色背景，刚好盖住自身位置对应的父容器底部边框，实现仅激活标签无下方下划线的效果

如果需要调整边框粗细、偏移量，同步修改border-bottom的宽度和bottom的偏移值即可保持匹配。

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