阴影（Shadows）

使用box-shadow通用类别来增加或移除阴影。

On this page

例子

虽然在Bootstrap中元件上的阴影预设被禁用，且可透过$enable-shadows启用，你也可以使用我们的box-shadow通用类别快速增加或移除阴影。包括对.shadow-none和其他三个预设大小的支持（有相关的变数用以对应）。

No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
        <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
        <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
        <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Sass

Variables

$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);

Utilities API

Shadow utilities are declared in our utilities API in scss/_utilities.scss. 

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