从离子按钮中删除边框答案

【问题标题】：Remove border from ion-button从离子按钮中删除边框
【发布时间】：2021-07-25 18:49:24
【问题描述】：

我正在构建一个 Ionic 应用程序。为了使它们更漂亮，我对按钮进行了四舍五入，但是当我这样做时，边框就像链接的照片一样。我尝试过这些不同的方法，但都没有奏效：

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

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

非常感谢。

【问题讨论】：

这看起来像box-shadow，不是吗？也许你可以试试box-shadow: none !important

标签： css angular ionic-framework button

【解决方案1】：

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

【讨论】：

【解决方案2】：

检查离子按钮的属性：

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

这些可以应用于特定的类。

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

ion-button {
...
}

【讨论】：