原文出处:https://blog.csdn.net/cangahi09025566/article/details/81027424
在ionic移动开发中,往往需要固定首页,不让其随着列表一起滑动.虽然可以固定但是会出现一条明显的阴影线.这很影响界面美观
如图红色线框圈住部分:
这个要去掉很简单,只需要在它的css样式里面添加如下代码:
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
left: 0;
bottom: -5px;
background-position: left 0 top -2px;
width: 100%;
height: 5px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMV…h/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
content: "";
}
加上该样式之后效果如下:
是不是好看多了呢,这样我们就把这个难看的阴影给去掉啦!
【补充:《ionic angjs2 ion-header 阴影bug》做法更简单 】
网址:https://segmentfault.com/q/1010000011767307
提问:
在转场动画没有完全结束前依然存在阴影 求解
新创建的项目没改动也这样
回答:
ionic的header有个after的伪类,把其中background设为none即可去掉阴影。
即在CSS加上:
/*去掉ion-header下面的阴影*/
.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
background-image: none;
}
比上面的代码更精简,不用维护其他的选项;