Bootstrap 简明教程

Bootstrap - Shadows

此章节讨论 box-shadow 效用。Bootstrap 提供了一组 CSS 类，其可以让你将不同类型的盒子阴影应用于元素。

This chapter discusses about the box-shadow utilities. Bootstrap provides a set of CSS classes that allows you to apply different types of box shadows to elements.

可用的预定义类如下：

The predefined classes available are as follows:

Class

Description

.shadow-none

No shadow effect.

.shadow-sm

Adds a small and subtle shadow effect.

.shadow

Applies a medium strength shadow effect.

.shadow-lg

Applies a large and prominent shadow effect.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

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