html - 如何从ios中的工具栏删除边框？

Question

我正在尝试设计这个应用程序，我在其中有一个工具栏和一个扩展程序来获取更多背景，它在android上看起来很完美，但在ios上，它的底部有一些难看的边框。

我尝试更改默认属性（无边界，--border-width），但是没有用。

我的HTML：

   <ion-header no-shadow no-border>
      <ion-toolbar class="header">
        <ion-buttons slot="start">
          <ion-menu-button color="light"></ion-menu-button>
        </ion-buttons>
        <ion-title class="g-text-center">
          <img class="logo" src="assets/icon/logo.svg">
          <ion-label class="title">some title</ion-label>
        </ion-title>
      </ion-toolbar>
    </ion-header>

我的CSS：

.header{
    --background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    // background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    opacity: 0.75;
    border: none !important;

}
.header-extension {
    background: linear-gradient(to right, #625ad5, #7f51d0, #9746c8, #ac37be, #bf23b2);
    height: 50px;
    opacity: 0.75;
}

Answer 1

我认为问题可能出在css specificity中。根据我的研究，我认为您更改--border-width的原始解决方案是正确的，但是仅将其放在.header类上还不够具体，因为正在应用正在使用的--border-width的选择器

.header-ios ion-toolbar:last-child

因此，如果您使用此选择器删除边框，则应该可以使用。如果您希望它在您的应用程序中使用，则将其放在 global.scss文件中

.header-ios ion-toolbar:last-child {
  --border-width: 0;
}

如果只在某些页面上需要它，我建议像这样向工具栏添加一个类

<ion-toolbar class="no-border">
 ...
</ion-toolbar>

然后像这样选择

.header-ios ion-toolbar.no-border:last-child {
  --border-width: 0;
}

或提出自己的选择器，其特异性要高于应用边框的基础选择器，也许是 ion-header本身的选择器。