如何在Tailwind CSS中实现多重盒阴影效果？

在Tailwind CSS里实现多重盒阴影，核心思路是利用它对任意值写法的支持，或者直接扩展配置文件中的boxShadow字段。原生CSS允许用逗号分隔多个阴影值，Tailwind同样可以沿用这一规则。

使用方括号任意值语法

最简单的方式是在类名中使用shadow-[...]来书写完整的box-shadow值，多个阴影之间用逗号分隔：

<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.2)] p-6 bg-white rounded">
  多重阴影卡片
</div>

上面代码中，我们在shadow-[...]里写了两层阴影，第一层是近距小模糊，第二层是远距大模糊，元素看起来更有层次。

在配置文件中扩展

如果多个地方都要用到同样的多重阴影，推荐在tailwind.config.js中定义：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'multi': '0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15)',
      }
    }
  }
}

配置好后就能使用shadow-multi这个类名：

<div class="shadow-multi p-6 bg-white rounded">
  使用自定义多重阴影
</div>

配合伪元素叠加

当阴影需要不同颜色或混合模式时，也可以用伪元素分别设置box-shadow然后叠加：

<div class="relative p-6 bg-white rounded">
  <div class="absolute inset-0 rounded shadow-[0_2px_8px_rgba(59,130,246,0.4)]"></div>
  <div class="absolute inset-0 rounded shadow-[0_12px_24px_rgba(0,0,0,0.2)]"></div>
  伪元素叠加阴影
</div>

注意事项

• 使用任意值语法时，空格要用下划线代替，逗号正常写。
• 多层阴影顺序会影响渲染，先写的在上方。
• 避免阴影层数过多导致性能下降。

掌握以上方法，就能在Tailwind CSS中灵活实现各种多重盒阴影效果。

Tailwind_CSSbox_shadow多重阴影修改时间：2026-07-30 07:45:15