bootstrap 5 默认表单控件有圆角（0.375rem），所谓“直角”多因主题覆盖、优先级冲突或未用.form-control类；需检查计算样式，覆盖时注意.input-group、.form-select、.form-range等组件的差异化处理及safari渲染限制。
Bootstrap 5 默认表单控件为什么没有圆角？
因为 Bootstrap 5 已将 .form-control 的 border-radius 设为 0.375rem（即 6px），但部分场景下你看到的“直角”可能来自：自定义主题覆盖、CSS 优先级冲突、或使用了未包裹 .form-control 类的原生 <input>。确认是否真没圆角，先检查计算样式里 border-radius 是否被重置为 0。
直接覆盖 .form-control 的 border-radius
最简单有效的方式是提高 CSS 选择器权重，确保你的规则生效：
.form-control {
border-radius: 8px !important;
}
注意几个关键点：
-
!important在小项目中可快速生效，但大型项目建议用更具体的选择器替代，比如.my-form .form-control - 若同时用了
.form-select（下拉框），它默认圆角是0.375rem，需单独处理：.form-select { border-radius: 8px !important; } - Checkbox / radio 的
.form-check-input不走border-radius，它是伪元素绘制，圆角无效
保持响应式圆角一致性（适配 .form-range 和 .input-group）
滑块 .form-range 和输入组 .input-group 的圆角逻辑不同，不能只改 .form-control：
-
.form-range的轨道和滑块是独立元素，圆角需分别设置：.form-range { border-radius: 8px; }只影响外容器；真正要圆滑的是.form-range::-webkit-slider-thumb的border-radius -
.input-group中首尾控件的圆角会被自动修正（如第一个元素左圆角、最后一个右圆角），若强行统一设8px，会导致中间按钮/附件失去正确弧度 —— 此时应改用.input-group > *:first-child .form-control和.input-group > *:last-child .form-control单独控制 - 使用
border-radius: var(--bs-border-radius)可复用 Bootstrap 的 CSS 变量，便于后续主题切换
避免 Safari 下 border-radius 剪裁内容的问题
在 Safari（尤其是旧版）中，对 .form-control 设置较大 border-radius 且含内边距时，文字或光标可能被裁切。这不是 Bug，而是渲染层叠顺序导致的 overflow 行为：
- 给
.form-control显式添加overflow: visible通常无效，因表单控件是替换元素 - 稳妥做法是微调
padding：例如原为0.375rem 0.75rem，圆角加大后可减为0.3rem 0.7rem，留出视觉余量 - 若用了
box-shadow（如 focus 状态），也要同步检查阴影是否被圆角截断 —— 可加clip-path: inset(0 0 0 0 round 8px)强制保留，但兼容性需权衡
.input-group 的自动圆角协调机制和 Safari 对替换元素的渲染限制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
