Bootstrap 5 边框阴影 - HTML

Bootstrap 5 是一个流行的 CSS 框架，它可以帮助程序员快速构建现代化的响应式网站和应用程序。边框和阴影是 Bootstrap 5 中常用的组件之一，可以通过简单的 HTML 代码即可实现专业的外观效果。

边框

添加边框类

Bootstrap 5 提供了多个边框类，可以轻松地给 HTML 元素添加边框。以下是常用的边框类：

<div class="border">这是一个带有默认边框的示例</div>

<div class="border border-primary">这是一个带有主要边框颜色的示例</div>

<div class="border border-secondary">这是一个带有次要边框颜色的示例</div>

<div class="border border-success">这是一个带有成功边框颜色的示例</div>

<div class="border border-danger">这是一个带有危险边框颜色的示例</div>

<div class="border border-warning">这是一个带有警告边框颜色的示例</div>

<div class="border border-info">这是一个带有信息边框颜色的示例</div>

<div class="border border-light">这是一个带有浅色边框的示例</div>

<div class="border border-dark">这是一个带有深色边框的示例</div>

<div class="border border-white">这是一个带有白色边框的示例</div>

圆角边框

可以通过添加 .rounded 类给边框元素创建圆角边框：

<div class="border rounded">这是一个圆角边框的示例</div>

可以使用以下类来实现不同的圆角效果：

• .rounded-0：无圆角
• .rounded-1：小圆角
• .rounded-pill：椭圆形圆角
• .rounded-circle：圆形

<div class="border rounded-0">无圆角</div>

<div class="border rounded-1">小圆角</div>

<div class="border rounded-pill">椭圆形圆角</div>

<div class="border rounded-circle">圆形</div>

边框大小

可以使用 .border-* 类来设置不同的边框大小，其中 * 表示边框的大小，取值为 0~5：

<div class="border border-2">这是一个边框大小为2的示例</div>

<div class="border border-4">这是一个边框大小为4的示例</div>

<div class="border border-5">这是一个边框大小为5的示例</div>

阴影

添加阴影类

Bootstrap 5 提供了多个阴影类，可以用于创建现代化的阴影效果。以下是一些常用的阴影类：

<div class="shadow">这是一个默认阴影的示例</div>

<div class="shadow-lg">这是一个较大阴影的示例</div>

上、下、左、右阴影

可以通过添加 .shadow-* 类来实现指定方向的阴影效果，其中 * 表示阴影方向，可以是 -top、-bottom、-start（左侧）或 -end（右侧）。

<div class="shadow-top">这是一个上方阴影的示例</div>

<div class="shadow-bottom">这是一个下方阴影的示例</div>

<div class="shadow-start">这是一个左侧阴影的示例</div>

<div class="shadow-end">这是一个右侧阴影的示例</div>

颜色阴影

可以通过添加 .shadow-* 类来实现不同颜色的阴影效果，其中 * 表示阴影颜色，可以是 primary、secondary、success、danger、warning、info、light 或 dark。

<div class="shadow-primary">这是一个主要颜色阴影的示例</div>

<div class="shadow-secondary">这是一个次要颜色阴影的示例</div>

<div class="shadow-success">这是一个成功颜色阴影的示例</div>

<div class="shadow-danger">这是一个危险颜色阴影的示例</div>

<div class="shadow-warning">这是一个警告颜色阴影的示例</div>

<div class="shadow-info">这是一个信息颜色阴影的示例</div>

<div class="shadow-light">这是一个浅色阴影的示例</div>

<div class="shadow-dark">这是一个深色阴影的示例</div>

以上是 Bootstrap 5 边框阴影的基本用法和示例。通过使用这些简单的类，程序员可以轻松地创建出各种外观效果丰富的界面元素。

注意：在使用前请确保已正确引入 Bootstrap 5 的 CSS 文件。