Bootstrap/docs/4.5/utilities/shadows

来自菜鸟教程
跳转至:导航、​搜索

使用box-shadow实用程序向元素添加或删除阴影。

例子

虽然组件上的阴影默认情况下在Bootstrap中是禁用的,但可以通过以下方式启用 $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>