如何实现ul元素圆角？使用border-radius无效的问题咨询

你的ul设置了border-radius却看不到圆角效果，核心原因是ul本身没有背景色，父容器.dropdown-content的背景会透过ul显示出来，盖住了ul的圆角（ul的边框是透明的，没有背景填充，圆角区域没有内容遮挡，父元素的直角背景就露出来了）。

下面是两种可行的修复方案：

方案一：给ul添加背景色 #

让ul的背景填充整个区域，border-radius的裁剪效果就会显现出来：

#myMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 10px;
  border: 5px solid transparent;
  background-color: rgb(62, 62, 62); /* 添加与父容器一致的背景色 */
  overflow: hidden; /* 可选，防止子元素溢出圆角范围 */
}

方案二：将圆角设置在父容器上 #

因为父容器本身带有背景色，直接给它设置圆角更直接，同时可以简化ul的样式：

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(62, 62, 62);
  min-width: 204px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 10px; /* 给父容器添加圆角 */
  overflow: hidden; /* 确保子元素不会超出圆角 */
}

#myMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 移除ul的border和border-radius */
}

补充说明 #

原代码中ul的border-radius其实是生效的，但由于ul没有背景、边框透明，视觉上无法感知到圆角的存在——你看到的是父容器的直角背景，所以误以为圆角没生效。

内容的提问来源于stack exchange，提问作者Mohammed Al-Hashimi