Dropdown菜单hover时圆角失效的根本原因是容器.dropdown-menu的圆角被子元素内容或样式覆盖，正确做法是修改CSS变量--bs-dropdown-border-radius而非.dropdown-item:hover的border-radius。
Dropdown菜单项 hover 时圆角失效，是因为默认被重置了
Bootstrap 的 .dropdown-menu 在 :hover 状态下本身不主动改圆角，真正影响视觉的是 .dropdown-item:hover 的背景色和边框行为——但如果你发现 hover 后圆角“变直”或“不连贯”，大概率是父容器 .dropdown-menu 的圆角被子元素的 border-radius 覆盖或裁剪所致。Dropdown 菜单项本身没有独立 hover 圆角逻辑，它继承自 .dropdown-menu 的圆角，而 hover 效果只作用于 item 内部（如背景色、文字颜色），不会自动扩展或修正圆角。
直接改 .dropdown-item:hover 的 border-radius 没用
因为 .dropdown-item 默认没有设置 border-radius，它的圆角完全依赖 .dropdown-menu 的容器圆角。你给 .dropdown-item:hover 单独加 border-radius，只会让单个 item 出现“内部圆角”，但和菜单整体不匹配，还可能因 overflow 或 padding 导致视觉错位。
- 查 DevTools 的 Computed 样式，你会发现
.dropdown-item的border-radius始终是0，即使你写了规则，也常被.dropdown-menu的overflow: hidden截断 -
.dropdown-menu默认带border-radius: var(--bs-dropdown-border-radius)（v5.3+），这个变量才是关键控制点 -
.dropdown-item的 hover 状态只改background-color和color，不触碰圆角
正确做法：改 --bs-dropdown-border-radius 变量
Bootstrap 5.3+ 把下拉菜单圆角统一交由 CSS 自定义属性 --bs-dropdown-border-radius 控制，它直接影响 .dropdown-menu 容器的圆角，并自然延伸到所有 item 的 hover 视觉边界（只要没额外覆盖）。
- 在
:root中覆盖该变量即可全局生效：:root { --bs-dropdown-border-radius: 12px; } - 若只改某处下拉菜单，用 wrapper 类更安全：
.my-dropdown { --bs-dropdown-border-radius: 8px; }，再把<div class="my-dropdown"><div class="dropdown-menu">...</div></div> - 注意：不要混用
rounded-*工具类和该变量——rounded-0会覆盖变量值，优先级更高 - 旧版本（v5.2 及以下）不支持该变量，需直接覆盖
.dropdown-menu的border-radius，并加!important防止被.dropdown-menu.show等高权重规则压掉
Dropdown-menu 圆角在 hover 时被“吃掉”的真实原因
常见现象是：菜单正常展开时圆角正常，一 hover 某个 item 就顶部/底部变直——这通常不是 hover 导致的，而是 .dropdown-menu 的 padding 或 margin 与 .dropdown-item 的 line-height / height 不匹配，导致 hover 背景色溢出容器边界，视觉上“削平”了圆角。
- 检查
.dropdown-menu是否有overflow: hidden（默认有），这是保证圆角不被 item 内容撑破的关键 - 避免给
.dropdown-item设margin或height，它应靠padding控制间距；否则 hover 区域会超出容器，圆角失效 - 如果用了
dropdown-menu-end或dropdown-menu-lg等变体，确认它们没附带硬编码的border-radius: 0 - Vue 或 React 封装的 Dropdown 组件（如 Bootstrap Vue）可能绕过原生样式链，需检查其 toggle-class 或 menu-class 是否覆盖了圆角逻辑
