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-white rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-white rounded">常规阴影</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">大阴影</div>