在使用Bootstrap進(jìn)行Web開發(fā)時(shí)，經(jīng)常需要為元素添加陰影效果來(lái)增強(qiáng)頁(yè)面的視覺吸引力。Bootstrap提供了一組通用類來(lái)方便地增加或移除陰影，其中就包括了box-shadow類。通過(guò)使用box-shadow類，開發(fā)者可以輕松地為元素添加陰影效果，或者在不需要時(shí)將其移除。

一、示例

雖然在Bootstrap中元件上的陰影預(yù)設(shè)被禁用，且可透過(guò)$enable-shadows啟用，你也可以使用我們的box-shadow通用類別快速增加或移除陰影。包括對(duì).shadow-none和其他三個(gè)預(yù)設(shè)大小的支持（有相關(guān)的變數(shù)用以對(duì)應(yīng)）。

<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

1、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);

2、Utilities API

陰影工具類可以在我們的SCSS文件中的utilities API（實(shí)用工具接口）中找到。

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