从离子按钮中删除边框

Question

我正在构建一个 Ionic 应用程序。我已经将按钮弄圆了，以使它们更漂亮，但是当我这样做时，边框就像链接的照片一样。我尝试了这些不同的方法，但其中 none 有效：

border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
text-shadow: none !important;
box-shadow: none !important;

button 1

其他按钮也会发生这种情况： button 2

我不能使用离子按钮，因为文字会随之崩溃。

非常感谢。

Answer 1

检查离子按钮的属性：

https://ionicframework.com/docs/api/button

--border-color  Border color of the button
--border-radius Border radius of the button
--border-style  Border style of the button
--border-width  Border width of the button
--box-shadow    Box shadow of the button

这些可以应用到特定的class。

或者在 global.scss 文件中，只需添加您的样式：

ion-button {
...
}

Answer 2

您可以像这样轻松使用 css 属性 --border-color 和 --border-width： --border-color: none; --border-width: 0px !important;。我希望这会有所帮助。

从离子按钮中删除边框

Remove border from ion-button

css

button

ionic-framework

angular