多个相邻元素切换效果出现边框重叠问题的解决方法
多个相邻元素切换效果出现边框重叠问题的解决方法
TimothyJia
发布于 2023-10-16 19:46:08
发布于 2023-10-16 19:46:08
多个相邻按钮切换效果出现边框重叠问题的解决方法 下图所示的是一种常见的切换效果，在实现这种切换效果时，经常会遇到相邻按钮边框重叠的问题（查看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>
<div class="btn-item">上海</div>
<div class="btn-item">广州</div>
<div class="btn-item">深圳</div>
<div class="btn-item">杭州</div>
</div>.btn-item{
...
border: 1px solid rgba(0, 0, 0, .4);
border-left: 0;
...
}
.btn-item:first-child{
border-left: 1px solid rgba(0, 0, 0, .4);
}
.btn-item.active{
...
border-color: #4A81FF;
box-shadow: -1px 0 0 0 #4A81FF;
...
}
.btn-item.active:first-child{
box-shadow: none;
}最终效果如下：
在这里插入图片描述
2、margin + z-index
使用margin + z-index来解决边框重叠问题，具体如下：按钮的每个边框都保留，对于正常状态的按钮，通过设置margin-left: -1px;将每个按钮向左移动一个像素，这样后一个按钮的左边框会遮盖前一个按钮的右边框；一次来解决正常状态下边框重叠问题；对于处于激活状态按钮，通过改变其z-index值来将被后一个按钮覆盖的右边框显示出来；
核心代码如下：
<div class="btn-group">
<div class="btn-item active">北京</div>
<div class="btn-item">上海</div>
<div class="btn-item">广州</div>
<div class="btn-item">深圳</div>
<div class="btn-item">杭州</div>
</div>.btn-item{
...
margin-left: -1px;
border: 1px solid rgba(0, 0, 0, .4);
}
.btn-item.active{
...
z-index: 1;
border-color: #4A81FF;
...
}最终效果如下：
在这里插入图片描述
以上就是目前我觉的解决边框重叠问题比较好的解决方案，仅供参考。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-05-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读