直接上最终效果

基本页面结构

      <div class="tab-list">
<div
v-for="tab in tabList"
:key="tab.id"
class="tab-item"
:class="activeTab === tab.id ? 'tab-selected' : ''"

          @click="onTab(tab.id)"

        >
<image :src="tab.icon" class="tab-icon" />
<div>{{ tab.label }}</div>
</div>
</div>

  $tab-height: 52px;
$tab-bgcolor: #e2e8f8


  .tab-list {
display: flex;
border-radius: 12px 12px 0 0;
background-color: $tab-bgcolor;

.tab-item {
flex: 1;
height: $tab-height;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
opacity: 0.65;
color: $primary-color;
font-weight: 600;
position: relative;

    }

.tab-icon {
width: 17px;
height: 17px;
margin-right: 4px;

    }

.tab-selected {
opacity: 1;
background: #ffffff;

    }


  }

添加上半两个圆角

这个很简单

    .tab-selected {
opacity: 1;
background: #ffffff;

      // 新增
border-radius: 12px 12px 0 0;

    }

添加下半两个反圆角

加两个辅助的伪元素

    .tab-selected::before {
content: '';
position: absolute;
left: -12px;
bottom: 0;
width: 12px;
height: $tab-height;
background: red;
border-radius: 0 0 12px 0;

    }
.tab-selected::after {
content: '';
position: absolute;
right: -12px;
bottom: 0;
width: 12px;
height: $tab-height;
background: red;
border-radius: 0 0 0 12px;

    }

再添加box-shadow

    .tab-selected {
opacity: 1;
background: #ffffff;
border-radius: 12px 12px 0 0;

      // 新装置
box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;

    }

到这个就差不多可以收尾了，把伪元素的背景色改为tabs的背景色

    .tab-selected::before {
content: '';
position: absolute;
left: -12px;
bottom: 0;
width: 12px;
height: $tab-height;
background: #e2e8f8;  // 修改
border-radius: 0 0 12px 0;

    }
.tab-selected::after {
content: '';
position: absolute;
right: -12px;
bottom: 0;
width: 12px;
height: $tab-height;
background: #e2e8f8; // 修改
border-radius: 0 0 0 12px;

    }

再处理下box-shadow

    .tab-selected {
opacity: 1;
background: #ffffff;
border-radius: 12px 12px 0 0;

      // box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;
box-shadow: 12px 12px 0 0 #ffffff, -12px 12px 0 0 #ffffff;

    }

完美

但是两边的还会有问题

父级元素overflow:hidden即可

.tab-list {
display: flex;
position: relative;
z-index: 2;
border-radius: 12px 12px 0 0;
background-color: #e2e8f8;
overflow: hidden; // 新增

 }

收工

参考

CSS3 实现双圆角 Tab 菜单

相关知识点回顾

box-shadow

1. 
   
2. x轴偏移 右为正
   
3. y轴偏移 下为正
   
4. 模糊半径
   
5. 阴影大小
   
6. 颜色
   
7. 位置 inset
   

border-radius

先记得下面这个图

• 
  
• 一个值的时候设置1/2/3/4
  
• 两个值的时候设置 1/3，2/4
  
• 三个值的时候设置1，2/4, 3
  
• 四个值就简单了1，2，3，4
  

border-radius 如果需要设置某个角的圆角边框,可以使用下面四个

1. 
   
2. border-top-left-radius;
   
3. border-top-right-radius;
   
4. border-bottom-left-radius;
   
5. border-bottom-right-radius;
   

又要画一个图了，上面四个属性，又可以设置一个值或者两个值

第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制

当然border-radius也可以分别设置水平半径 垂直半径

border-radius: 10px / 20px 30px 40px 50px; 水平半径都为10px, 但四个角的垂直半径分别设置

border-radius: 50px 10px / 20px;

下期预告

曲线圆角tabs

传送门