前端实现0.5边框的tab切换(附带选中)

 先贴一张效果图，这是我在网上随便找的，也是本文要实现的效果。

先实现一个0.5像素边框

<-- 页面结构 -->
<div class="test">
  <p class="test-p">左边</p>
  <p class="test-p">中间</p>
  <p class="test-p">右边</p>
</div>

<-- 样式 -->
.test {
  display: flex;
  width: 300px;
  height: 50px;
}
.test-p {
  position: relative;
  flex: 1;
}
.test-p::after {
  display: block;
  content: '';
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid red;
  transform-origin: 0 0;
  transform: scale(.5, .5);
  box-sizing: border-box
}

 

 效果是这样的， 中间两个边框重叠在一起形成了1px,还有圆角和选中状态需要处理一下。

 整理的代码：

<-- 添加class -->
<div class="test">
  <p class="test-p left">左边</p>
  <p class="test-p center active">中间</p>
  <p class="test-p right">右边</p>
</div>


// 添加样式
.left::after {
  border-radius: 60px 0 0 60px;
}
.right::after {
  border-radius: 0 60px 60px 0;
}
.center::after {
  border-left: none;
  border-right: none;
}
.active::after {
  border: 1px solid blue !important;
  background-color: rgba(0, 0, 255, .2);
}