html导航栏四个角设置成圆角

以下是两种设置HTML导航栏四个角为圆角的方法：

1. 使用CSS的border-radius属性设置圆角边框：

<style>
.navbar {
  border-radius: 30px; /* 设置四个角的圆角半径为30px */
}
</style>

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

2. 使用CSS的伪元素:before和:after结合transform属性实现圆角效果：

<style>
.navbar {
  position: relative;
  overflow: hidden;
}

.navbar:before,
.navbar:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #000; /* 设置背景颜色，可根据需要修改 */
}

.navbar:before {
  left: 0;
  border-radius: 30px 0 0 30px; /* 设置左侧两个角的圆角半径为30px */
}

.navbar:after {
  right: 0;
  border-radius: 0 30px 30px 0; /* 设置右侧两个角的圆角半径为30px */
}
</style>

<div class="navbar">
  <!-- 导航栏内容 -->
</div>