Bootstrap 5 边框圆角大小设置 Rounded-1/2/3

千浩同学_4587

千浩同学_4587

2026-04-23

812人浏览

原创

不存在。bootstrap 5 已移除 rounded-0~rounded-3 数字类,改用 rounded、rounded-top、rounded-pill、rounded-circle 等语义化类;需通过自定义类、css 变量或内联样式实现数字级圆角控制。

bootstrap 5 边框圆角大小设置 rounded-1/2/3

Bootstrap 5 的 rounded-1 到 rounded-3 还存在吗?

不存在。Bootstrap 5 已移除 rounded-0~rounded-3 这类数字分级类名,统一改用语义化命名:rounded(默认圆角)、rounded-top(仅上边)、rounded-pill(胶囊形)、rounded-circle(正圆)。如果你在代码里写了 rounded-2 却没效果,大概率是版本混淆——确认你用的是 Bootstrap 5.x(非 4.x),且未混入旧版 CSS。

想用数字控制圆角大小,该怎么写?

Bootstrap 5 默认不提供 rounded-1 这类类,但可通过以下方式实现类似效果:

VPS Bootstrap
VPS Bootstrap

从零启动全新 VPS,完成 OpenClaw 完整部署,包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载
  • 直接写内联样式:style="border-radius: 0.25rem"(对应旧版 rounded-1)
  • 覆盖 CSS 变量::root { --bs-border-radius-sm: 0.25rem; --bs-border-radius: 0.375rem; --bs-border-radius-lg: 0.5rem; } —— 这会影响所有使用这些变量的组件(btn、card、form-control 等)
  • 自定义工具类(推荐用于项目级复用):
    .rounded-1 { border-radius: 0.25rem !important; }<br>.rounded-2 { border-radius: 0.5rem !important; }<br>.rounded-3 { border-radius: 0.75rem !important; }
    注意:加 !important 是为压过 Bootstrap 原生 rounded 类(它值为 0.25rem),但要小心和 rounded-pill 冲突

rounded 和 rounded-pill 混用会怎样?

会覆盖。因为 rounded-pill 的声明是 border-radius: 50%,优先级与 rounded 相同(同为单类名),后写的生效。常见错误是这样写:class="rounded rounded-pill",结果只有胶囊形,小圆角被完全忽略。如果只想微调胶囊形的弧度(比如不要那么“鼓”),不能靠叠加类,得单独写:style="border-radius: 30%" 或定义新 class。

表格单元格加 rounded 为什么无效?

因为 <table> 默认是 <code>border-collapse: collapse,单元格没有独立边框盒模型,border-radius 无法作用于单个 <td>。解决办法只有两个: <ul> <li>改表格边框模型:<code>.my-table { border-collapse: separate; border-spacing: 0; },再给 td 加 border-radius

  • 放弃单格圆角,改用容器包裹:<div class="rounded-3 overflow-hidden"><table class="mb-0">...</table></div>——这是最稳定、无兼容性风险的做法
  • 实际改圆角时,最容易被忽略的是:**它不是孤立属性**。一旦你动了 --bs-border-radius,按钮、输入框、卡片、下拉菜单的圆角全跟着变;而单独给某个 img 加 border-radius,又得同步管好它的宽高比、父容器溢出、是否响应式——这些细节不串起来看,改了也白改。

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    bootstrap

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    bootstrap框架介绍
    bootstrap框架介绍

    本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

    2026.03.18

    685

    21

    bootstrap安装教程
    bootstrap安装教程

    本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

    2026.03.18

    199

    9

    css3教程
    css3教程

    php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    2023.06.14

    1900

    10

    有哪些css3渐变属性
    有哪些css3渐变属性

    css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2023.11.01

    2746

    5

    Python uv使用教程
    Python uv使用教程

    本专题汇总了 Python uv 使用教程与高效使用指南,从 uv 安装配置、常用命令到虚拟环境、依赖管理与项目打包,系统讲解如何用 uv 替代 pip 与 poetry,全面提升 Python 项目开发效率,助你快速上手这一现代化包管理工具,打造干净高效的 Python 工作流。

    2026.10.15

    0

    15

    剧云AI短剧创作教程合集
    剧云AI短剧创作教程合集

    本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

    2026.10.14

    0

    15

    剧云AI剧本创作零基础入门
    剧云AI剧本创作零基础入门

    本专题系统讲解剧云AI剧本创作流程,涵盖灵感、梗概、大纲、分场与正文生成,帮助新手快速完成首个中文剧本项目。

    2026.10.14

    0

    14

    VibeKnow文档转视频操作指南
    VibeKnow文档转视频操作指南

    本专题讲解VibeKnow上传Word、TXT、Markdown等材料生成视频的方法,覆盖内容解析、脚本组织、画面生成与成片检查。

    2026.10.14

    0

    15

    VibeKnow知识视频制作与导出详解
    VibeKnow知识视频制作与导出详解

    本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

    2026.10.14

    0

    13

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap5 入门教程
    Bootstrap5 入门教程

    共0课时 | 0人学习

    Bootstrap Components 组件文档
    Bootstrap Components 组件文档

    共0课时 | 0人学习

    Bootstrap Grid 栅格系统
    Bootstrap Grid 栅格系统

    共0课时 | 0人学习