CSS導航圓角

nav {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
nav a:hover {
background-color: #f5f5f5;
}

導航欄是網站中最常用的元素之一。為了使網站更加美觀和有吸引力，我們可以將導航欄的角變成圓角。CSS中有一個非常方便的屬性- border-radius，可以很容易地實現這個效果。這個屬性可以將元素的邊框角變成圓角，而不是傳統的直角。

在上面的代碼中，我們首先在導航欄(nav)上設置了一個背景顏色、10像素的邊框半徑、一個陰影和一些內邊距(padding)。 接下來，我們重置了無序列表(ul)的默認外邊距，得到緊湊的布局。 然后，我們將每個列表項(li)設置為行內塊元素，這意味著它們將在同一行上呈現，就像導航菜單一樣。

最后，我們給了鏈接(a)一些內邊距、顏色和無文字裝飾。為了讓鏈接在鼠標懸停時更加可見，我們還添加了一個背景顏色。現在我們的導航欄看起來更美觀了，是吧？