CSS底部導航欄可以通過曲線凸起的方式增加層次感和美觀度。下面是一個示例：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">分類</a></li>
<li><a href="#">購物車</a></li>
<li><a href="#">個人中心</a></li>
</ul>
</nav>
<style>
nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-around;
}
li {
position: relative;
padding: 0.5em 1em;
overflow: hidden;
}
li::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50% 50% 0 0;
transform: scale(2) translate(0, 100%);
transition: transform 0.3s ease-out;
}
li:hover::before {
transform: scale(1) translate(0, 0);
}
a {
text-decoration: none;
color: #333;
font-weight: bold;
transition: color 0.3s ease-out;
}
a:hover {
color: #f00;
}
</style>

代碼中的關鍵點是li::before偽元素和:hover偽類的運用。通過:before偽元素創建一個白色圓形，然后使用transform屬性讓它放大并移到li元素的下方。接著，通過:hover偽類，讓:before偽元素縮小并移到li元素的上方，形成了一個曲線凸起的效果。此外，還需要注意ul元素要使用display: flex屬性，讓導航欄變為水平排列。