直接写 border-top-left-radius 有时无效，因 bootstrap 5 组件的圆角由高权重复合选择器（如 .input-group > *:first-child）控制，易覆盖单个属性声明。
为什么直接写 border-top-left-radius 有时没反应
Bootstrap 5 的组件（如 .form-control、.btn）多数自带 border-radius 声明，且常通过复合选择器（如 .input-group > *:first-child）控制具体哪一边的圆角——这意味着你单独给 input 写 border-top-left-radius: 8px，大概率被更高权重的父级规则覆盖。
实操建议：
- 用浏览器开发者工具选中元素，在 Computed 面板里点开
border-radius，看哪条规则标了 overridden - 优先改写 Bootstrap 的目标选择器，比如：
.input-group > .form-control或.btn，而不是只改input标签 - 若需精细控制单角，务必同步处理对应位置的兄弟元素（如
.input-group > *:last-child），否则会出现“半边圆、半边直”的断裂感
border-radius 方向类在 RTL 模式下会反转吗
会，但不是自动“智能翻转”，而是靠 [dir="rtl"] 属性选择器显式重写。Bootstrap 5 不解析语言，只认 html[dir="rtl"] 这个开关。一旦启用，:first-child 和 :last-child 的语义在视觉流中就调换了：原本加在左上角的圆角，实际会出现在右上角。
实操建议：
- 检查页面根元素是否真有
dir="rtl"，没有就加；仅靠lang="ar"或浏览器语言设置无效 - 避免依赖
:first-child/:last-child控制圆角方向，改用语义化类（如.rounded-start/.rounded-end），它们在 RTL 下会被 Bootstrap 自动映射到正确侧边 - 调试时临时加
outline: 1px solid red到目标元素，确认你认为的“第一个”子元素在 RTL 下是否真在视觉左侧
如何用 Sass 变量统一控制所有组件的圆角方向
Bootstrap 5（v5.3+）支持 CSS 自定义属性，但更稳定、可预测的方式是编译时改 Sass 变量——它能从源头影响所有依赖 $input-border-radius、$btn-border-radius 等的组件，包括它们对不同方向的拆分逻辑（如 $btn-border-radius-start）。
实操建议：
- 在自定义 Sass 文件中，于
@import "bootstrap/scss/functions"后、@import "bootstrap/scss/bootstrap"前，重设变量：$input-border-radius: 0.375rem;、$btn-border-radius-start: 0.5rem;、$btn-border-radius-end: 0; - 注意：部分变量（如
$btn-border-radius-start）只在启用$enable-rounded时生效，别漏掉前提 - 不推荐全局覆盖
--bs-border-radius，因为很多组件（如.popover）会显式声明border-radius，绕过该变量
移动端 Safari 对 input[type="search"] 的圆角拦截
这不是样式没写对，而是 Safari 私有行为：它会给 input[type="search"] 强制加上 -webkit-appearance: searchfield，这个值会清空你写的 border-radius 和 border，哪怕加了 !important 也无效。
实操建议：
- 强制重置外观：
input[type="search"] { -webkit-appearance: none; }，之后再设border-radius - 如果仍需搜索框语义（如唤起系统搜索键盘），可保留
type="search"，但必须加-webkit-appearance: none并手动补全其他样式（如背景、焦点轮廓） - 测试时务必真机连 Safari 调试，模拟器或 Chrome DevTools 的 mobile view 不会复现此问题
