使用ion-segment控件实现当前选中选项卡圆角样式

公司新增tab选项卡样式如下图所示：

我的处理方式通过样式加上代码点击事件控制样式的方式来改变当前选中的元素的boder-radius，从而实现上面这一种效果。

首先我们把最外层ion-segment控件整个背景设置为白色

如下图所示：

其次我们再把ion-segment-button的背景色设置为浅灰色如下图所示：

然后我们在处理这个ion-segment-button里面的div布局

最后我们通过代码来控制当前选中的ion-segment-button按钮两边的弧度让，

举个例子如果当前选中第二个tab那么我就把第一个tab右下角 和第三个tab左下角 的半径设置为0.5rem。

依次类推，从而保证当前弧度不会因为页面拉伸而导致出现虚框。

如果有更好的办法，欢迎大家留言评论 谢谢