总有一些设计师搞独特，在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>
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。