view:
<view class="tab-box">
<view class="tab-item active">报名(1333)</view>
<view class="tab-item">已录用(13)</view>
<view class="tab-item">未录用(8)</view>
</view>
wxss:
.tab-box{
width: 516rpx;
height: 62rpx;
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
font-size: 26rpx;
border: 1px solid #28AC86;
border-radius: 50rpx;
overflow: hidden;
}
.tab-box .tab-item{
width: 100%;
height: 100%;
line-height: 62rpx;
}
.tab-box .tab-item.active{
background: #28AC86;
color: #ffffff;
}
后面改成这样子就可以了
.tab-box{ width: 516rpx; display: flex; align-items: center; justify-content: space-around; text-align: center; font-size: 26rpx; } .tab-box .tab-item{ width: 100%; height: 62rpx; line-height: 62rpx; border: 1px solid #28AC86; } /** 第一个tab-item*/ .tab-box .tab-item:first-child{ border-right: none; border-radius: 50rpx 0 0 50rpx; } /** 最后一个tab-item*/ .tab-box .tab-item:last-child{ border-left: none; border-radius: 0 50rpx 50rpx 0; } .tab-box .tab-item.active{ background: #28AC86; color: #ffffff; }考虑把边框做到tab-item上
设成内边框试试？
border-style:inset;