css导航圆角 |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)一些内边距、颜色和无文字装饰。为了让链接在鼠标悬停时更加可见，大家还添加了一个背景颜色。现在大家的导航栏看起来更美观了，是吧？