<p>Bootstrap 5 已移除 Jumbotron，需用 .bg-light + .p-5 + .rounded-* 等工具类替代；Bootstrap 4 中可重写 .jumbotron 的 border-radius，但须确保 CSS 优先级足够高。</p>
Bootstrap 4/5 中 Jumbotron 已被移除，需改用 .bg-light + .p-5 等组合替代
bootstrap 5 正式移除了 jumbotron 组件，官方文档明确不再支持。如果你在 bootstrap 5 项目里看到 <div class="jumbotron">，它不会有任何预设样式，也不会自动应用圆角。实际效果取决于你自己的 css 或所用的 bootstrap 版本残留。
常见混淆点：很多教程仍以 Bootstrap 4 为基准讲解，而 Bootstrap 4 的 Jumbotron 默认圆角是 border-radius: .3rem（约 4.8px），但这个值可被覆盖——关键不是“怎么改”，而是“改谁”。
Bootstrap 4 中直接覆盖 .jumbotron 的 border-radius
如果你确认使用的是 Bootstrap 4（检查 bootstrap.min.css 文件头或 npm list bootstrap 输出），修改圆角最直接的方式是重写其 border-radius 值，且必须确保你的 CSS 优先级足够高。
- 不要只写
.jumbotron { border-radius: 12px; }—— Bootstrap 4 的原生规则带!important吗？不带，但它在 CSS 文件中靠后声明，所以你的样式要放在 Bootstrap CSS 之后，或加!important（仅当必要） - 推荐方式：用更具体的选择器，比如
.my-jumbotron { border-radius: 16px; }，然后在 HTML 中写<div class="jumbotron my-jumbotron"> - 注意：Bootstrap 4 的
.jumbotron-fluid会移除左右 padding 和部分圆角逻辑，但不影响border-radius本身；若同时用了.container包裹，圆角会被容器裁剪，需检查父元素overflow
Bootstrap 5 中模拟 Jumbotron 并控制圆角的正确做法
Bootstrap 5 推荐用通用工具类组合实现类似视觉效果，此时圆角由你完全掌控，无需对抗已废弃的组件逻辑。
- 基础结构：
<div class="bg-light p-4 p-md-5 rounded-3">—— 其中rounded-3对应border-radius: .75rem（12px），rounded-0为直角，rounded-4是1.5rem - 若需自定义数值（如
20px），添加内联 style 或单独 class：style="border-radius: 20px;"或定义.rounded-xl { border-radius: 20px !important; } - 避免踩坑：不要给父容器设
overflow: hidden（比如某些卡片组件），否则圆角会被裁掉；rounded-*类只作用于自身，不继承 - 响应式圆角？Bootstrap 5 没提供原生支持，需配合媒体查询或自定义断点类
为什么有时改了 border-radius 却没生效
这不是代码写错，而是 CSS 层叠或渲染上下文干扰导致的常见假象。
-
box-shadow或outline可能遮盖圆角边缘，临时移除它们验证效果 - 父元素设置了
overflow: hidden（尤其在.card或.modal-content内嵌时），会把子元素的圆角“切掉” - 使用了
background-clip: padding-box（某些主题 CSS 默认启用），会导致背景色不延伸到边框圆角区，看起来像没圆角 - 检查浏览器 DevTools 的 Computed 标签页，确认
border-radius是否被其他规则覆盖，以及是否应用到了正确的元素上
实际改动往往就一行 CSS，但前提是清楚自己用的是哪个版本、目标元素到底是谁、有没有被外层样式悄悄截断。圆角这事，90% 的问题出在“以为在改 Jumbotron”，其实是在改一个没有样式的 div。
