如何实现边框重叠效果?
如上图,这就是我想实现的效果,结构先定下来
<view class="car-tab d-flex j-around a-center" >
<view class="car-tab-itm active">
<text>1号车</text>
</view>
</view>或许你会觉得很简单,可能第一个想到的是下面代码
.car-tab {
position: relative;
width: 750rpx;
height: 80rpx;
border-bottom: 4rpx solid #f7f7f7
}
.car-tab-itm {
height: 80rpx;
padding-left: 20rpx;
padding-right: 20rpx;
}
.car-tab-itm.active {
border-bottom: 4rpx solid #ff7a1c;
}
这就是上面代码的效果
好像子元素的border与父元素的border并没有重合哦,似乎差了两像素
你说,子元素与父元素的高度一致,边框的px值也是一样的,他俩就是重合不了.
对于这种效果有如下几种解决办法
1.子元素在继承父元素的高度之上加上自己边边框的高度
.car-tab {
position: relative;
width: 750rpx;
height: 80rpx;
border-bottom: 4rpx solid #f7f7f7
}
.car-tab-itm {
padding-left: 20rpx;
padding-right: 20rpx;
height: 84rpx;
}
.car-tab-itm.active {
border-bottom: 4rpx solid #ff7a1c;
}2.子元素与父元素高度保持一致,父元素设置border-box模型
.car-tab {
box-sizing: border-box;
position: relative;
width: 750rpx;
height: 80rpx;
border-bottom: 4rpx solid #f7f7f7
}
.car-tab-itm {
padding-left: 20rpx;
padding-right: 20rpx;
height: 80rpx;
}
.car-tab-itm.active {
border-bottom: 4rpx solid #ff7a1c;
}3.margin负值的运用
.car-tab {
box-sizing: border-box;
position: relative;
width: 750rpx;
}
.car-tab-itm {
box-sizing: border-box;
padding-bottom: 30rpx;
}
.carline {
height:4rpx;
width: 750rpx;
background-color:#f7f7f7;
margin-top:-4rpx;
}
.car-tab-itm.active {
border-bottom: 4rpx solid #ff7a1c;
}结构需要改变
<view class="car-tab d-flex j-around a-center" >
<view class="car-tab-itm active">
<text>1号车</text>
</view>
</view>
<view class="carline"></view>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
