[分享]css两侧为弧形的导航栏

导航栏是网站设计中不可或缺的部分，而使用CSS实现两侧为弧形的导航栏可以为网站增添独特的风格。下面是一个简单的示例：.navbar { backgroundcolor: 333; display: f...

导航栏是网站设计中不可或缺的部分，而使用CSS实现两侧为弧形的导航栏可以为网站增添独特的风格。下面是一个简单的示例：

.navbar {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* 设置弧形效果 */
  border-top-right-radius: 50% 20%;
  border-top-left-radius: 50% 20%;
  overflow: hidden;
}

.nav-link {
  color: white;
  padding: 10px;
  text-decoration: none;
}

.nav-link:hover {
  background-color: #555;
} 

在示例代码中，.navbar是导航栏的容器。我们使用flex布局实现左右两个导航链接的对齐，并设置padding为10px以增加美观性。接下来，利用border-top-right-radius和border-top-left-radius属性来实现顶部两侧的弧形效果，并利用overflow:hidden属性来隐藏超出容器的部分。

而.nav-link是导航链接的样式，我们设置颜色为白色，并去除下划线。当鼠标悬停在链接上时，我们使用:hover伪类来改变链接的背景色为#555， 增加反馈效果。

使用以上示例代码，我们即可实现两侧为弧形的导航栏。