直接用整体效果基本上页面结构 div class

直接用整体效果

基本上页面结构

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

  }

加上上边2个圆弧

这一非常简单

    .tab-selected {
      opacity: 1;
      background: #ffffff;
      // 新增加
      border-radius: 12px 12px 0 0;
    }

加上下边2个反圆弧

加2个辅助伪元素

    .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. x轴偏位 右大于零
2. y轴偏位 下大于零
3. 模糊不清半经
4. 黑影尺寸
5. 色调
6. 部位 inset

border-radius

先还记得下面的图

• 一个值的情况下设定1/2/3/4
• 2个系数的情况下设定 1/3，2/4
• 三个系数的情况下设定1，2/4, 3
• 四个值就很简单1，2，3，4

border-radius 必要时设定某一一个角的圆弧外框,可以用下边四个

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

又要画一个图了，上边四个特性，又能设一个值或是2个值

第一个值是水准半经，第二个是竖直半经。假如省去第二个值，它是以第一个拷贝

自然border-radius还可以各自设定水准半经 竖直半经

border-radius: 10px / 20px 30px 40px 50px; 水准半经均为10px, 但四个角的竖直半经各自设定

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

下期预告

曲线图圆弧tabs