应重定义 Sass 变量 $border-radius-values 或 CSS 变量 --bs-border-radius仅改 $border-radius 不影响 rounded-2因其由独立 map 控制非 Sass 项目可用 :root 覆盖变量自定义类需避免 !important 并确保加载顺序。如何覆盖 Bootstrap 的 rounded 类默认圆角值bootstrap 5 的 rounded 系列类如 rounded、rounded-1 到 rounded-5底层依赖 css 自定义属性 --bs-border-radius 和预设的 $border-radius sass 变量。直接在 html 里加 styleborder-radius: 4px 能临时覆盖但无法复用或响应式控制也不符合维护逻辑。最稳妥的方式是**重定义 Sass 变量**后重新编译 —— 这能同步影响所有依赖圆角的组件如 btn、card、dropdown若项目没接入 Sass可用 :root 覆盖 CSS 变量:root { --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; }注意这仅对使用了这些变量的类生效Bootstrap 5.3 全面迁移至此旧版本需查文档确认变量支持范围避免用 !important 单独覆盖某个 rounded 类 —— 容易和 rounded-circle、rounded-pill 冲突且破坏 utility 优先级规则为什么改了 $border-radius 但 rounded-2 没变因为 rounded-* 类的数值不是直接映射变量而是通过 Sass map $border-radius-values 生成的。默认值是(0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.5rem, circle: 50%, pill: 50vh)所以只改 $border-radius它主要影响 rounded 无后缀类不会动 rounded-2。要统一调整所有层级必须重定义整个 $border-radius-values map若只想微调某一级比如让 rounded-2 从 0.5rem 变成 6px单独覆盖该键值即可$border-radius-values: map-merge($border-radius-values, (2: 6px));注意单位一致性混用 rem 和 px 可能导致缩放异常尤其在根字体大小变动时不编译 Sass 时如何安全添加自定义圆角类Bootstrap 的 utility API 允许扩展但需确保 class 名不冲突、优先级可控。直接写 .rounded-6 { border-radius: 12px !important; } 是危险的 —— !important 会干扰响应式断点类如 rounded-md-3的叠加逻辑。推荐用 Bootstrap 官方方式在自定义 CSS 中按相同结构声明不加 !important.rounded-6 { border-radius: 12px; }并确保该 CSS 在 Bootstrap 主样式之后加载若需响应式支持如 rounded-md-6得手动补全媒体查询或借助 PostCSS 插件自动化生成命名别用 rounded-custom 这类模糊名 —— 容易和未来 Bootstrap 版本新增的类撞名建议带项目前缀如 my-rounded-xl修改后哪些组件会连锁变化改 $border-radius-values 或 --bs-border-radius 不只是影响 rounded 类还会波及所有显式引用这些变量的组件 Fotor AI Image Generator Fotor 平台的 AI 图片生成器