CSS是網頁開發中經常使用的一種樣式表語言，能夠為網頁增添美感，使其更加易于閱讀和操作。其中一種常見的效果是圓角導航欄，本文將介紹如何使用CSS制作一個簡單的圓角導航欄。

.nav-menu {
background-color: #F8F8F8;
border-radius: 5px;
padding: 10px;
display: flex;
justify-content: space-between;
}
.nav-menu a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border-radius: 20px;
}
.nav-menu .active {
background-color: #333;
color: #FFF;
}

首先，我們需要創建一個導航欄容器，也就是.nav-menu元素。我們在這個元素上設置了背景顏色，圓角半徑和padding值，以及display:flex和 justify-content屬性，這可以使我們在導航欄中添加更多內容。

在容器內部，我們使用 a 元素創建了每個導航鏈接，并設置了文本裝飾，顏色， padding 和 border-radius屬性來確保它們看起來像按鈕。 我們還添加了一個較大的 border-radius 值來使鏈接的角度更加圓潤。

最后，我們使用 .active 類來提供當前活動鏈接的樣式。在本例中，這個活動鏈接具有不同的背景顏色和文本顏色。

<div class="nav-menu">
<a href="#">首頁</a>
<a href="#">產品</a>
<a href="#">服務</a>
<a href="#" class="active">關于我們</a>
</div>

最后，我們通過 HTML 模板來放置導航鏈接。我們只需將每個鏈接包裝在.nav-menu中，并將活動類應用于需要高亮顯示的鏈接。

在以上的CSS代碼和 HTML 模板的幫助下，您可以容易地制作一個漂亮的、圓角的導航欄。這是如此簡單而美妙的效果，許多設計師使用 CSS 來美化他們的網頁。所以希望大家也能夠學會如何使用 CSS 制作圓角導航欄。