ionic4自定义底部Tab五个按钮的样式（按钮凸起效果）

效果图

实现代码

tabs.page.html代码.

<ion-tabs  (ionTabsDidChange)="tabchange($event)">
  <ion-tab-bar  slot="bottom" translucent="true">
    <ion-tab-button tab="tab1" [ngClass]="{'left-one-tab-active':tabname=='tab1','left-one-tab':tabname!='tab1'}">
      <ion-icon name="send" class="icon"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="tab2" [ngClass]="{'left-two-tab-active':tabname=='tab2','left-two-tab':tabname!='tab2'}">
      <ion-icon name="apps" class="icon"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="tab3" [ngClass]="{'center-tab-active':tabname=='tab3'||tabname==undefined,'center-tab':tabname!='tab3'}">
      <ion-icon name="send" class="icon"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="tab2" [ngClass]="{'right-one-tab-active':tabname=='tab2','right-one-tab':tabname!='tab2'}">
      <ion-icon name="apps" class="icon"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="tab1" [ngClass]="{'right-two-tab-active':tabname=='tab1','right-two-tab':tabname!='tab1'}">
      <ion-icon name="send" class="icon"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.html代码.

ion-tab-bar {--border: 0;height: 110px;}

ion-tab-button {
    --color: #8c8e8c;
    --color-selected: var(--color-bg-dark-theme);
}

.left-one-tab {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 80px;
    width: 20%;
    left: 15px;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        background-color: #fff;
        color: #8c8e8c;
        border-radius: 50%;
        box-shadow: 0 9px 16px #b9c0c7;
    }
}
.left-one-tab-active {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 80px;
    width: 20%;
    left: 15px;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        border-radius: 50%;
        background-image: linear-gradient(-45deg, var(--color-bg-dark-theme) 0%, var(--color-bg-theme) 90%);
        color: var(--ion-color-white, #fff);
        box-shadow: 0 9px 16px var(--color-bg-dark-theme);
    }
}

.left-two-tab {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 96px;
    width: 20%;
    left: 20%;
    // right: 0;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        background-color: #fff;
        color: #8c8e8c;
        border-radius: 50%;
        box-shadow: 0 9px 16px #b9c0c7;
        margin-left: 10px;
    }
}
.left-two-tab-active {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 96px;
    width: 20%;
    left: 20%;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        border-radius: 50%;
        margin-left: 10px;
        background-image: linear-gradient(-45deg, var(--color-bg-dark-theme) 0%, var(--color-bg-theme) 90%);
        color: var(--ion-color-white, #fff);
        box-shadow: 0 9px 16px var(--color-bg-dark-theme);
    }
}
.center-tab {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 110px;
    width: 20%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        font-size: 3rem;
        padding: 6px;
        border-radius: 50%;
        background-color: #fff;
        color: #8c8e8c;
        box-shadow: 0 9px 16px #b9c0c7;
    }
}
.center-tab-active {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 110px;
    width: 20%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        font-size: 3rem;
        padding: 6px;
        background-image: linear-gradient(-45deg, var(--color-bg-dark-theme) 0%, var(--color-bg-theme) 90%);
        color: var(--ion-color-white, #fff);
        border-radius: 50%;
        box-shadow: 0 9px 16px var(--color-bg-dark-theme);
    }
}

.right-one-tab {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 96px;
    width: 20%;
    right: 20%;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        color: #8c8e8c;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 9px 16px #b9c0c7;
        margin-right: 10px;
    }
}
.right-one-tab-active {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 96px;
    width: 20%;
    right: 20%;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        border-radius: 50%;
        margin-right: 10px;
        background-image: linear-gradient(-45deg, var(--color-bg-dark-theme) 0%, var(--color-bg-theme) 90%);
        color: var(--ion-color-white, #fff);
        box-shadow: 0 9px 16px var(--color-bg-dark-theme);
    }
}

.right-two-tab {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 80px;
    width: 20%;
    right: 15px;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        color: #8c8e8c;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 9px 16px #b9c0c7;
    }
}
.right-two-tab-active {
    position: absolute;
    overflow: visible;
    text-align: center;
    height: 80px;
    width: 20%;
    right: 15px;
    margin: auto;
    bottom: 4px;
    z-index: 99999;

    .icon {
        padding: 6px;
        border-radius: 50%;
        background-image: linear-gradient(-45deg, var(--color-bg-dark-theme) 0%, var(--color-bg-theme) 90%);
        color: var(--ion-color-white, #fff);
        box-shadow: 0 9px 16px var(--color-bg-dark-theme);
    }
}

tabs.page.ts代码.

export class TabsPage {
  constructor() {}
  tabname:any= 'tab3';
  tabchange(e){
    this.tabname = e.tab;
  }
}

其中(ionTabsDidChange)="tabchange($event)"用来监听tab的变化，然后改变样式