ionic-framework - 在 IONIC 4 中更改圆形 css

Question

我有一个圆形按钮，如下所示:

<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>

类 shadow-red 是:

.shadow-red{
    box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
    border-radius: 5px;
}

结果是:



所以我尝试了许多不同的方法来改变圆形，但因为它不是一个 css 类，所以执行以下操作不起作用。

.round{
  border-radius:5px!important;
}

我尝试添加 border-radius:5px!important;至 ion-button类(class)， button , .btn ，以及许多其他组合，但它们都不起作用。

我还尝试将以下几行添加到 variables.css 中，但它们都不起作用:

--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....

Answer 1

不要使用 shape 属性，现在您可以根据自己的意愿更改按钮的外观。需要更改的一件事是 expand 属性。如果将其设置为 full，则会删除左右边框(请参阅文档)。因此您无法设置或更改边框半径。将其设置为阻止，您仍然会有一个全角按钮。

<ion-button expand="block" class="shadow-red">Signup with</ion-button>

使用以下 CSS 自定义属性，如 Ionic 4 docs 中所述。 .

.shadow-red{
    --border-radius: 5px;
    --box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}

结果: