总有一些设计师搞独特,在app设计小程序设计中,把下面的底部标签栏,凸出去一块,例如闲鱼app,如下图的发布图标。

咱就不能好好设计?规规矩矩的设计?设计师你咋不上天啊? —— 淡定,不要急,我告诉你,我用css实现了这样的布局,不信你看效果图:

其实原理不难:将footer分三层,投影层,形状层,页面布局层;

投影层,在footer标签上就行,不能用box-shadow,我们用css3的滤镜实现投影:filter: drop-shadow(-1px 0px 8px rgba(0,0,0,.08)),两者区别自行度娘,不做补充;

形状层,当然用伪元素了,::before和::after,一个做背景色,一个做特殊形状;

页面布局层,放你的html布局代码吧!不过有个注意点:你要将footer的布局层抬高层次,不然会被遮挡!

css代码:

footer{width: 100%;height: 14vw;position: fixed;left: 0;bottom: 0;z-index: 66666;filter: drop-shadow(-1px 0px 8px rgba(0,0,0,.08));}
footer::before{content: "";width: 100%;height: 14vw;background:#fff;display: inline-block;}
footer::after{content: "";width: 25%;height: 14vw;border-radius: 50% 50% 0 0;background: #fff;display: inline-block;position: absolute;left: 50%;top: -20px;transform: translateX(-50%);}
footer .bar{position: absolute;z-index: 99999;width: 100%;height: 100%;left: 0;top: 0;}

html代码:

<footer>
    <div class="bar">123</div>
</footer>