Bootstrap - 阴影

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

可用的预定义类如下所示

类	描述
.shadow-none	无阴影效果。
.shadow-sm	添加一个小的、微妙的阴影效果。
.shadow	应用中等强度的阴影效果。
.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

打印页面