Bootstrap - 阴影

本章讨论box-shadow实用程序。Bootstrap 提供了一组 CSS 类，允许您将不同类型的框阴影应用于元素。

可用的预定义类如下：

班级	描述
.shadow-无	无阴影效果。
.shadow-sm	添加小而微妙的阴影效果。
。阴影	应用中等强度的阴影效果。
.shadow-lg	应用大且突出的阴影效果。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Shadows</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3">
       <h4>Shadow effect</h4>
       <div><button class="btn shadow-none">Button with no shadow</button></div>
       <div><button class="btn shadow">Button with a subtle shadow</button></div>
       <div><button class="btn shadow-sm">Button with a regular shadow</button></div>
       <div><button class="btn shadow-lg">Button with a larger shadow</button></div>
     </div>
   </body>
</html>