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/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>

列印頁面