Skip to main content Skip to docs navigation
View on GitHub

阴影(Shadows)

用于向 HTML 元素添加或删除阴影的工具类。

示例

在 Bootstrap 中,组件上的阴影(shadow)默认是被关闭的,但是通过开启 $enable-shadows 变量可以打开阴影效果,你还可以利用 box-shadow 工具类快速添加或删除阴影。还包括了对 .shadow-none 以及三种默认阴影尺寸(每种尺寸都有相对应的变量)的支持。

无阴影
小阴影
常规阴影
大阴影
<div class="shadow-none p-3 mb-5 bg-light rounded">无阴影</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-body rounded">常规阴影</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">大阴影</div>

Sass

变量

$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

工具类 API

工具类 API 中定义了 阴影(Shadow)工具类,对应的文件为 scss/_utilities.scss了解如何使用工具类 API。

    "shadow": (
      property: box-shadow,
      class: shadow,
      values: (
        null: $box-shadow,
        sm: $box-shadow-sm,
        lg: $box-shadow-lg,
        none: none,
      )
    ),