仅对 <ul> 元素设置 border-radius 无效，是因为它默认无背景色、无边框，圆角不可见；需为其显式声明 background-color（或 border），才能使 border-radius 生效。

仅对 `

` 元素设置 `border-radius` 无效，是因为它默认无背景色、无边框，圆角不可见；需为其显式声明 `background-color`（或 `border`），才能使 `border-radius` 生效。

在 CSS 中，border-radius 属性本身完全支持作用于 <ul> 元素——它并非 <ul> 的“特例”，而是所有块级（及部分行内）元素都可应用的标准属性。问题根源在于：圆角效果必须依托于有视觉表现的边界区域，例如背景填充或实际边框。而默认的 <ul> 元素仅渲染内容（<li>），自身 background-color 为 transparent，border 为 none，因此即使设置了 border-radius: 10px，也因无可见区域而“看不见”圆角。

✅ 正确做法是为 #myMenu 显式添加背景色（推荐）或边框：

#myMenu {
  margin: 0;
  padding: 8px 0; /* 建议保留适当内边距，避免文字贴边 */
  list-style: none;
  background-color: rgb(62, 62, 62); /* 关键：提供可见背景 */
  border-radius: 10px;               /* 此时圆角立即生效 */
  overflow: hidden;                  /* 可选：防止子元素溢出破坏圆角 */
}

⚠️ 注意事项：


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 不要仅依赖父容器（如 .dropdown-content）的 border-radius 来“间接”实现列表圆角——子元素若超出父容器裁剪范围或自身无背景，仍可能显示直角；
• 若需阴影与圆角协同，建议将 box-shadow 也移至 #myMenu 上（而非仅放在 .dropdown-content），确保阴影弧度匹配；
• 使用 overflow: hidden 可防止 <li> 内部悬停效果或伪元素意外突破圆角边界；
• 避免为 <ul> 设置 display: inline-block 或浮动等可能破坏文档流的属性，除非有特殊布局需求。

总结：border-radius 对 <ul> 完全有效，失效的本质是「无背景=无视觉载体」。只需一步——为 <ul> 添加 background-color（或 border），圆角即刻呈现，简洁可靠，无需 JavaScript 或额外 wrapper 元素。

立即学习“前端免费学习笔记（深入）”；