多个相邻按钮切换效果出现边框重叠问题的解决方法

本文介绍了在实现多个相邻按钮切换效果时遇到的边框重叠问题及其解决方法。主要探讨了两种解决方案:1) 使用`box-shadow`和`border`的组合,通过调整`border`和`box-shadow`来避免重叠;2) 利用`margin`负值使按钮相互遮盖,以解决正常状态和激活状态下的边框问题。并提供了核心代码示例及最终效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

多个相邻按钮切换效果出现边框重叠问题的解决方法

下图所示的是一种常见的切换效果,在实现这种切换效果时,经常会遇到相邻按钮边框重叠的问题(查看demo),有没有好的解决方法呢?

在这里插入图片描述

所出现的边框重叠问题:

在这里插入图片描述
目前,很多优秀的UI组件库都有这种切换效果的组件,通过对他们实现方式的学习,现对边框重叠问题的解决方法做如下总结:

1、border-left + box-shadow

使用vue或react的伙伴,肯定都非常熟悉elementant-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>
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值