如何在离子 4 中的离子菜单上应用边框半径 css 属性？

【问题标题】：How to apply border-radius css property on ion-menu in ionic 4?如何在离子 4 中的离子菜单上应用边框半径 css 属性？
【发布时间】：2023-04-01 18:35:02
【问题描述】：

我正在创建 Ionic 4 Angular 应用程序，在应用程序中我使用 ion-menu 来显示菜单项。如何在 ion-menu 上应用border-top-right-radius 和border-bottom-right-radius css 属性？下图显示了我到底想要什么。 Here is ion-menu documentation link.

【问题讨论】：

标签： css angular7 ionic4

【解决方案1】：

你认为这实现了你想要的：

global.scss

ion-menu{
    --ion-toolbar-background: grey;
    ion-list{
         border: 2px solid grey !important;
    padding: 10px !important;
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
    background: grey !important;


    }
    ion-item{
        --background: grey !important;
        --color: #fff;
    }
}

【讨论】：

你太棒了，每次都救了我一整天。非常感谢。

【解决方案2】：

你试过了吗？

.ion-item-border {
 border-radius: 20px !important;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-top: 5px; 
}

【讨论】：