.class="form-control rounded-0"不生效，因为.form-control的border-radius由bootstrap写死为0.375rem，与rounded-*类无关；需直接覆盖border-radius：局部用.my-input{border-radius:0}，全局用.form-control{border-radius:0!important}，并注意form-floating和input-group的额外处理。
为什么 class="form-control rounded-0" 不生效
因为 .rounded-0 是工具类，只对「显式应用了圆角类」的元素起作用，比如 <img class="rounded"> 或 <div class="rounded-pill">。而 <code>.form-control 的圆角是 Bootstrap 写死在 CSS 规则里的：border-radius: 0.375rem，它不依赖任何 rounded-* 类，所以加 rounded-0 完全没用。
真正能去掉表单输入框圆角的写法
必须直接覆盖 .form-control 的 border-radius 声明，优先级要足够高：
- 推荐方式（局部）：
.my-input { border-radius: 0; }+<input class="form-control my-input"> - 全局覆盖（谨慎）：
.form-control { border-radius: 0 !important; }—— 注意只加在border-radius上，别把整条规则都!important - 如果用了
form-floating，还要额外处理容器：.form-floating > .form-control { border-radius: 0; }，否则 label 会遮住顶部圆角，看起来像“失效”
移动端和 Safari 的兼容性坑
Safari（尤其 iOS 16+）对小数单位圆角（如 0.125rem、0.25rem）渲染不稳定，有时直接忽略。去掉圆角时看似简单，但若你后续想恢复「极小直角」（比如 1px），建议用像素值：
- 别写
border-radius: 0.0625rem（≈1px），它在 Safari 里可能不渲染 - 改用
border-radius: 1px，明确且可靠 - 所有表单控件（
<select></select>、<textarea></textarea>）都要统一覆盖，不能只改<input>
别漏掉伪元素和第三方样式干扰
某些 UI 库或自定义主题会在 ::placeholder 或 ::before 上叠加视觉层，掩盖真实的边框形状；还有些 CDN 加载顺序错乱，导致你的 CSS 被 Bootstrap 后加载的 min.css 覆盖。
- 用浏览器 DevTools 检查 computed styles，确认
border-radius确实为0，而不是被其他规则覆盖 - 如果用了 Bootstrap Icons 或 Font Awesome，它们的图标按钮（如带搜索图标的
.input-group）可能自带圆角逻辑，需单独加.input-group-text { border-radius: 0; } -
!important不是万能解——它只该出现在你真正无法提升选择器优先级的场景，比如多个框架共存时
form-floating 和 input-group 这两类包装结构，它们内部的圆角控制是独立的，不随 .form-control 一起走。
