Ionic 5：删除离子项目后面的背景阴影

Question

I have border-bottom-left-radius on ion-item on my ion-header. problem I get black background on side that is curved as on the image below. How can I remove it? I want the background to be the same as the default background color: #f8f8fa

<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border" mode="md">
    <ion-buttons slot="end">
        <ion-button fill="clear" color="light">
            <ion-icon name="notifications-outline"></ion-icon>
        </ion-button>
    </ion-buttons>

</ion-toolbar>

<ion-item lines="none">

        <ion-label>
            <p>Welcome!</p>
            <h3>Where are you going next?</h3>
        </ion-label>
  <ion-avatar slot="end">
    <img src="https://yt3.ggpht.com/a-/AOh14GjThP6xpdHXuwV9tVt7wMvBIytCfvZm4N_BkN1MrA=s288-c-k-c0xffffffff-no-rj-mo">
  </ion-avatar>
</ion-item>

and my sass

ion-header {
min-height: 150px;
  ion-toolbar, ion-item {
    --background: var(--ion-color-primary);
    background: var(--ion-color-primary);
    padding: 0 20px;    
    overflow: hidden;
  }

  ion-toolbar {
    .bordered {
      --border-radius: 10px;
      --box-shadow: 5px 5px 10px #947cff, -5px -5px 10px #7e64ff;
    }
  }

  ion-item {
      padding: 50px 20px 60px;
      border-bottom-left-radius: 40px;

Answer 1

the border-bottom-left-radius is what is causing the curve. Just remove it