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

仅对 `

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

在 CSS 中，border-radius 属性本身完全支持作用于

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

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

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载

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

  ⚠️ 注意事项：

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

  总结：border-radius 对

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！