讲师中心 微信公众号
AI工具推荐 视频效率加速

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

千浩同学_4587

千浩同学_4587

发布时间:2026-04-23 14:25:06

|

812人浏览过

|

来源于php中文网

原创

不存在。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> 默认是 border-collapse: collapse,单元格没有独立边框盒模型,border-radius 无法作用于单个 <td>。解决办法只有两个:

  • 改表格边框模型:.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,又得同步管好它的宽高比、父容器溢出、是否响应式——这些细节不串起来看,改了也白改。

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

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

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

685

2026.03.18

bootstrap安装教程
bootstrap安装教程

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

199

2026.03.18

css3教程
css3教程

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

1900

2023.06.14

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

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

2746

2023.11.01

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

0

2026.10.15

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

0

2026.10.15

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

0

2026.10.15

C++ 开发环境怎么搭建
C++ 开发环境怎么搭建

C++开发环境专题汇集Windows、Linux下的编译器与IDE安装配置教程,涵盖GCC、Clang、Visual Studio、CLion和VS Code,以及编译运行首个程序的步骤。

0

2026.10.15

热门下载

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

精品课程

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

共0课时 | 0人学习

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

共0课时 | 0人学习

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

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn