Bootstrap 5 圆角边框概览
Bootstrap 5 的 Border-radius（圆角边框） 功能为我们提供了一致且响应式的元素圆角控制方式。通过使用预定义的实用类，我们可以轻松实现自定义，打造出时尚、现代的视觉效果。从锐利的直角到流畅的曲线，它能毫不费力地提升界面的视觉吸引力。
Border-radius 属性本质上用于设置元素边框的圆角半径。在 Bootstrap 5 中，我们可以直接使用特定的类名来轻松为元素添加圆角，无需编写复杂的 CSS。
圆角边框类 (Classes)
让我们来看看 Bootstrap 5 中可用的具体类名及其功能：
描述
—
使元素的所有四个角都变圆。
仅使元素的顶部两个角变圆。
仅使右侧的两个角变圆（适用于从左到右的文本方向）。
仅使元素的底部两个角变圆。
仅使左侧的两个角变圆（适用于从左到右的文本方向）。
使元素呈现为完美的圆形（通常用于正方形元素）。
使元素呈现为胶囊形状（药丸形状）。### 基本语法
使用起来非常简单，我们只需在 HTML 标签中添加相应的类即可：
内容
示例演示
为了更好地理解这些类的效果，让我们通过几个实际的代码示例来探索它们。
示例 1：图片元素上的圆角
在这个例子中，我们将把所有的圆角类应用到图片元素上，以便直观地观察它们带来的视觉变化。
HTML 代码：
Bootstrap 5 Border-radius
img {
width: 100px;
height: 100px;
}
.custom-pill {
width: 200px;
}
Bootstrap 5 圆角演示
输出效果：
我们将看到一组图片，分别展示了从普通圆角、顶部圆角、侧边圆角，直到完全的圆形和胶囊形状的效果。这种视觉反馈能帮助我们快速选择最适合的设计样式。
示例 2：Div 元素上的圆角
接下来，让我们看看在标准的 div 容器上应用这些类会有什么效果。我们将使用带有边框的方块来进行演示。
HTML 代码：
Bootstrap 5 Border-radius
/* CSS style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #e9e9e9;
}
.custom-pill {
width: 200px;
}
技术演示平台
Bootstrap 5 圆角演示
输出效果：
通过这个示例，我们可以清楚地看到不同圆角类如何影响矩形元素的形状。结合不同的边框颜色类（如 INLINECODE8e842183, INLINECODE42915a62），我们可以创建出丰富多样的 UI 组件样式。
总结
Bootstrap 5 的圆角工具类不仅简化了 CSS 的编写，还确保了整个项目的风格一致性。无论是处理用户头像、卡片组件还是按钮，掌握这些类都能让我们的前端开发效率大大提高。