CSS底部導航中間的凸出是一種常見的設計風格，在實現過程中，通常采用CSS的偽元素pseudo-element屬性實現。

.nav{
position: fixed;
left: 0; 
bottom: 0;
display: flex;
justify-content: space-around;
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
}
.nav::before{
content: "";
position: absolute;
top: -15px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #fff;
}
.nav::after{
content: "";
position: absolute;
top: -12px;
left: calc(50% - 12px);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #f0f0f0;
}

通過before偽元素實現了圓形凸起效果，after偽元素則是做了一層灰色背景的覆蓋，并且凸起的圓形要比before偽元素小一些，從而達到修飾的效果。

使用CSS的偽元素屬性，無需增加多余的HTML結構，能夠更好的減少頁面的復雜程度，提高代碼可維護性。