导航栏中搜索框圆角不显示的根本原因是Bootstrap导航栏组件重置子元素边框样式，包括.navbar-nav > li > a、.navbar .input-group > *等选择器设border-radius: 0，且.form-control:focus在某些版本中也重置为直角。
Bootstrap 导航栏里的搜索框（input）默认圆角常被“吃掉”，不是没生效，而是被 .navbar、.input-group 或 :focus 状态下的更高优先级规则覆盖了。
为什么 navbar 中的搜索框圆角不显示？
根本原因是 Bootstrap 的导航栏组件会重置子元素的边框样式。比如：.navbar-nav > li > a 或 .navbar .input-group > * 这类选择器显式设了 border-radius: 0；更隐蔽的是，.form-control:focus 在某些版本中也会重置为直角——你一点击输入框，圆角就消失了。
常见现象包括：
- 未聚焦时看着有圆角，点击后变直角
- 加了
rounded类但完全没反应 - 用
input-group包裹后左右圆角只有一边生效
直接覆盖 .form-control 和所有相关状态
最稳妥的做法是统一覆盖整个“生命周期”的圆角声明，而不是只改普通态。把下面这段 CSS 加到你项目里（确保在 Bootstrap CSS 之后加载）：
.navbar .form-control,
.navbar .form-control:focus,
.navbar .input-group > .form-control,
.navbar .input-group > :first-child,
.navbar .input-group > :last-child {
border-radius: 0.5rem !important;
}
说明：
- 必须包含
:focus，否则交互时圆角丢失 -
.input-group > :first-child和> :last-child是为了兼容input-group-text或按钮前后包裹的场景 - 用
!important是因为 navbar 相关规则权重极高，单纯提升选择器层级（如加.my-navbar）往往不够 - 值用
0.5rem而非像素，保持与 Bootstrap 基础缩放一致
如果用了 form-floating 或自定义 input-group 结构
当搜索框嵌在 form-floating 里，或你手动加了 input-group-prepend（Bootstrap 4）或 input-group-text（Bootstrap 5），圆角逻辑会被进一步拆解：
-
.form-floating > .form-control需单独加圆角，它的容器.form-floating默认无圆角且overflow: visible，可能让圆角视觉溢出 - 若搜索框不在
input-group的首尾位置（比如中间夹了个下拉菜单），它会被自动清空圆角——此时得给它加独立类，如search-rounded，再写.navbar .search-rounded { border-radius: 0.5rem; } - Safari 对
input[type="search"]有私有样式，务必加上-webkit-appearance: none;才能真正接管圆角
别踩这些坑
几个高频翻车点：
- 只改
.form-control，漏掉:focus或.input-group子选择器 → 圆角只在静止时可见 - 在 CDN 引入模式下，试图用
--bs-border-radius变量控制表单圆角 → 它对.form-control无效，该变量只影响.btn、.card等组件 - 给
input加rounded-pill→ 这个类专为按钮设计，对输入框易导致两端过度圆滑甚至溢出 - 在移动端小屏下用
0.125rem这类小数值 → Safari 和部分安卓 WebView 渲染不稳定，建议最低用0.25rem（4px）
真正起效的关键，永远是打开浏览器开发者工具，盯着「Computed」面板里最终生效的 border-radius 值，看它究竟来自哪条规则——而不是猜哪个类名该加、哪个该删。
