css实现底部导航栏中间凸起

CSS实现底部导航栏中间凸起是一个比较简单的效果，只需要通过一些基本的CSS属性就可以轻松实现。具体实现方法如下：

    .nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #fff;
        @R_502_6277@-shadow: 0 -2px 4px rgba(0,0.1);
    }
    
    .nav-item {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
    }
    
    .nav-item.active {
        position: relative;
        bottom: -10px;
        background-color: #fff;
        border-radius: 50%;
        @R_502_6277@-shadow: 0 0 8px rgba(0,0.2);
    }
    
    .nav-item.active img {
        position: relative;
        top: -4px;
    }

以上代码中，我们首先给底部导航栏设置了固定位置、高度、宽度等属性，并设置了一些常规样式。接下来，我们通过设置每个导航项的宽度、高度、浮动和文本对齐方式，来让所有的导航项排列在一行。

在第三部分的.nav-item.active样式中，我们通过设置position: relative来让该项相对于父元素进行定位，然后设置bottom属性来让该项往下移动10px，形成凸起的效果。我们还设置了该项的背景颜色、圆角和阴影等属性，以使其更加美观。

最后，我们还通过设置.nav-item.active img的相对位置来让该项的图标相应地上移一些，让整个效果更加完美。