阴影工具

阴影层级

<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影 - 用于卡片悬浮效果</div>
<div class="shadow">默认阴影 - 使用最广泛</div>
<div class="shadow-lg">大阴影 - 用于模态框/弹窗</div>

实际应用

阴影常与卡片、下拉菜单和模态框配合使用：

<div class="card shadow-sm">
    <div class="card-body">
        <h5>卡片标题</h5>
        <p>微阴影让卡片更有层次感</p>
    </div>
</div>

<div class="dropdown-menu shadow d-block position-static">
    <a class="dropdown-item" href="#">下拉菜单带阴影</a>
</div>

<div class="d-grid gap-2 d-md-flex">
    <button class="btn btn-primary shadow-sm">带阴影按钮</button>
    <button class="btn btn-success shadow">中层阴影按钮</button>
</div>

深色模式适配

在深色模式下，阴影会自动调整透明度以适应暗色背景，无需额外操作。