css 制作圆角导航栏 |css 3 相框效果

.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 制作圆角导航栏。