技術標籤：htmlcss3cssjsvue

總有一些設計師搞獨特，在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>