bootstrap如何修改默认的圆角大小类（rounded）

应重定义 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 里加 style="border-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 图片生成器