navbar默认无圆角，圆角通常来自子元素（如.nav-link、.navbar-brand）或外层容器添加的rounded类；需精准重置子元素border-radius才能彻底去除。
navbar 默认圆角从哪来
Bootstrap 5 的 .navbar 本身不设 border-radius，真正带圆角的是它的子元素——比如 .navbar-brand 图标、.navbar-nav 内部链接，或者你用了 .navbar-expand-* 后自动包裹的 .container / .container-fluid（某些主题或自定义布局里会加）。但最常见、最容易被误判的来源是：.navbar 外层容器或父级 div 被加了 rounded 类，或者项目全局 CSS 里写了 .navbar { border-radius: ... }。
直接覆盖 .navbar 的 border-radius 无效？
如果你写了 .navbar { border-radius: 0 !important; } 却没生效，大概率是因为：
- 选择器优先级不够——Bootstrap 5 的部分变体（如
.navbar-dark或.bg-*）会带更高 specificity 的规则 - 你改的是
.navbar，但实际圆角在.navbar-collapse或.navbar-nav上（尤其用flex布局时，某些浏览器会把圆角“继承”到 flex item 边缘） - 用了
.navbar-expand-lg后，内部.navbar-nav的第一个/最后一个.nav-link可能被加了rounded-start/rounded-end
真正起效的三种写法
按推荐程度排序：
✅ 推荐：精准定位并重置子元素圆角
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
border-radius: 0 !important;
}
✅ 兼容旧版或快速验证：加前缀 + !important（虽略冗余，但覆盖力强）
.navbar {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
✅ 如果确定整个导航栏区域都要直角（含外层容器），且不介意影响其他组件，可用通配重置（慎用）：
.navbar * {
border-radius: 0 !important;
}
容易被忽略的视觉残留点
即使 .navbar 和所有子项都清掉了 border-radius，仍可能看到“疑似圆角”：
-
.navbar-brand里的<img>自带.rounded类（检查是否误加） -
.navbar-toggler在折叠态下是按钮，默认有border-radius: 0.375rem，必须显式加rounded-0或覆盖 - 某些 UI 框架（如 AdminLTE 衍生主题）会在
.navbar上叠加box-shadow，阴影边缘会模拟出圆角感，需同步设box-shadow: none
真正干净的直角 Navbar，往往要连 border、box-shadow、overflow 一起看——圆角只是表象，底层是整套视觉节奏的协同设计。
