多个相邻按钮切换效果出现边框重叠问题的解决方法
下图所示的是一种常见的切换效果,在实现这种切换效果时,经常会遇到相邻按钮边框重叠的问题(查看demo),有没有好的解决方法呢?
所出现的边框重叠问题:
目前,很多优秀的UI组件库都有这种切换效果的组件,通过对他们实现方式的学习,现对边框重叠问题的解决方法做如下总结:
1、border-left
+ box-shadow
使用vue或react的伙伴,肯定都非常熟悉element
或ant-design
组件库,对于这种边框重叠问题,他们的解决方法相同,都是通过border-left
+ box-shadow
来解决;具体展开就是:对于正常状态下的按钮,让所有按钮的border-left
设置为0,并为第一个按钮单独设置border-left
;对于处于激活状态的按钮,改变其border-color
,此时激活状态的按钮由于左边框为0,产生颜色缺失,通过设置box-shadow
来解决激活状态按钮左边框颜色缺失,box-shadow
在盒模型中不占据空间,因此该解决方法非常巧妙。
核心代码如下:
<div class="btn-group">
<div class="btn-item active">北京</div>