【css】tab并列时border重叠解决方法

[fengbingzi]

项目中经常会有

这种效果
如果单纯使用选中后改变颜色 容易出现

所以这里要使用box-shadow来处理border叠加问题 使用box-shadow覆盖 border-right
基础三个button 样式

.default {border: 1px solid #d9d9d9; boder-left: 0;}

.checked {boder-color:#1890ff ;box-shadow: -1px 0 0 0 #1890ff}来解决

这样放大后就不会出现boder相邻引发颜色加重的问题。
原理还是css层叠样式表box-shadow会盖在border-right上