如何实现边框重叠效果?

如上图,这就是我想实现的效果,结构先定下来

代码语言：javascript复制

<view class="car-tab d-flex j-around a-center" >
    <view class="car-tab-itm active">
      <text>1号车</text>
    </view>
</view>

或许你会觉得很简单,可能第一个想到的是下面代码

代码语言：javascript复制

.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.子元素在继承父元素的高度之上加上自己边边框的高度

代码语言：javascript复制

.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模型

代码语言：javascript复制

.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负值的运用

代码语言：javascript复制

.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;
}

结构需要改变

代码语言：javascript复制

<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>

border

0 人点赞