更改IONIC 4中的Round CSS

Question

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

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

阴影红色类是：

.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类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>

使用以下Ionic 4文档中所述的CSS自定义属性。

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

结果：