Html 移除离子头中的底部边框

我在尝试删除我的ionic应用程序中的ion标头边框底部时遇到问题

以下是

tab home.html

的代码：

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="{{card.image}}">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>

近亲

正如您在这里看到的，我们感兴趣的部分：

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>

近亲

我尝试了一切（在浏览器中我看不到这个边框！），但没有改变它！ 有人能帮我找到删除边界的方法吗？ 注意：还试图编辑IONAL.css，但仅在浏览器中更改

编辑：并且它应该仅在该视图中隐藏，因此在类是条形透明的情况下

没有问题

只需将此添加到自定义CSS：

.bar-header {
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}

---

@本诺夫的回答对我不起作用

这就是我所做的，以消除离子导航栏的底部边界

.bar {
    background-size: 100% 0px;
}

---

我正在使用ionic-1.0.0-rc.4

这为我在ionic 1.1.0上删除了标题和选项卡之间的边框

.bar-header {
    box-shadow: none;
    height: 45px;
}

---

在爱奥尼亚2/3中，将使用爱奥尼亚标头无边框删除边框

<ion-header no-border> </ion-header>

<ion-header class="ion-no-border"></ion-header>

在离子5中，将使用class=“离子无边界”删除边界

<ion-header no-border> </ion-header>

<ion-header class="ion-no-border"></ion-header>

---

选项1：使用溢出CSS属性

ion-header {
    overflow: hidden;
}

选项2：使用的无边框保护

<ion-header no-border><ion-header>

---

对于离子5，它应该是

<ion-header class="ion-no-border"></ion-header>

---

我就是这样解决的

给ion头的子级离子工具栏一个类似“headerMain”的类，并在下面应用css

css:

---

对于爱奥尼亚5号，这对我来说很有效：

<ion-header class="ion-no-border"></ion-header>

你有没有找到解决方案？有类似的问题。是否尝试添加样式：背景图像：无；边框底部：无？我正在应用程序中使用侧菜单，希望标题透明！你能解释一下你是如何使你的标题透明的吗？我也有边界问题：（已经好几个星期了..发发慈悲吧！@MilanMaharjan你可以在我接受的答案中看到我是怎么做的。是的。这是我删除ion导航条底部边框的操作。这不会删除边框，只是更改背景位置。边框和背景可能是相同的，但边框仍然存在，并且它的高度仍然被考虑在内。这确实起到了作用，但我不明白为什么。。你能解释一下吗？如果代码段不起作用（就像它对我所做的那样），请尝试将！important；添加到背景图像和边框底部属性中。对于Ionic 2+，可接受的答案应该是：添加溢出：隐藏是Ionic 4中唯一对我有效的解决方案。