如何在 Ionic 中使标题的底角变圆

Question

我正在尝试在下面实现这样的标题。

rounded bottom corners

这是我的解决方案，

ion-content {
    --background: #817afb; 
}

div.main {
    height: 100%;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    overflow: auto;
}

<ion-content fullscreen>
  <div class="main">
  ....
  </div>
</ion-content>

当我尝试使用 ion-refresher 和 ion-infinite-scroll 时效果不佳。谁有解决方案建议？

Answer 1

ion-content {
    --background: #817afb; 
}

.main {

    enter code here
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    overflow: auto;
    position: absolute;
    top: 40px !important;
    
}