如何仅用HTML和CSS实现带1-4按钮的圆角菜单？求示例

当然可以仅通过HTML和CSS实现你要的这种圆角菜单！下面是一个贴近你需求的示例代码，你可以根据实际场景调整尺寸、颜色等样式：

HTML结构 #

<div class="rounded-menu">
  <button class="menu-btn">1</button>
  <button class="menu-btn">2</button>
  <button class="menu-btn">3</button>
  <button class="menu-btn">4</button>
</div>

CSS样式 #

.rounded-menu {
  display: flex;
  background-color: #f0f0f0;
  border-radius: 25px; /* 控制整个菜单的圆角大小 */
  padding: 4px; /* 菜单内边距，让按钮和圆角边框有间距 */
  width: fit-content;
}

.menu-btn {
  border: none;
  background-color: transparent;
  padding: 10px 20px;
  border-radius: 20px; /* 按钮自身的圆角 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
}

.menu-btn:hover {
  background-color: #ffffff; /* hover时的高亮效果 */
}

/* 如果需要默认选中某个按钮，可以加这个类 */
.menu-btn.active {
  background-color: #ffffff;
}

关键说明 #

• border-radius 是实现圆角的核心属性，分别给菜单容器和按钮设置合适的数值就能得到你要的圆角效果
• 使用 flex 布局可以轻松让按钮横向排列，适配不同数量的按钮
• 通过调整 padding、颜色、字体大小等属性，可以完全匹配你图片里的样式

你可以直接复制这段代码到本地测试，根据实际需求修改样式参数即可。

内容的提问来源于stack exchange，提问作者Mumar21