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

在Tailwind CSS中实现多重盒阴影效果，核心是利用CSS的box-shadow属性支持多值叠加的特性，结合Tailwind CSS的自定义配置或任意值语法来完成，不需要额外编写大量脱离框架的CSS代码。

多重盒阴影的CSS原理

CSS原生的box-shadow属性支持同时设置多个阴影值，每个阴影值之间用逗号分隔，每个阴影值可以独立设置水平偏移、垂直偏移、模糊半径、扩散半径和颜色，语法如下：

/* 单个阴影语法 */
box-shadow: offset-x offset-y blur-radius spread-radius color;
/* 多重阴影语法，多个阴影用逗号分隔 */
box-shadow: shadow1, shadow2, shadow3;

例如同时设置两个阴影的CSS代码如下：

.multi-shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
}

Tailwind CSS实现多重盒阴影的方法

方法一：使用任意值语法

Tailwind CSS支持通过方括号包裹任意值的方式直接使用自定义样式，不需要提前配置，适合临时使用的多重阴影场景。

直接在元素的class中添加shadow-[多重阴影值]即可，注意内部的逗号需要保留，阴影值按照CSS语法编写：

<div class="w-64 h-32 bg-white rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.1),0_4px_8px_rgba(0,0,0,0.05)]">
  多重阴影元素
</div>

这里需要注意，任意值中的空格需要用下划线替换，逗号直接保留，Tailwind会自动解析生成对应的CSS规则。

方法二：自定义工具类配置

如果项目中多个地方需要用到相同的多重阴影，可以通过Tailwind CSS的配置文件自定义工具类，方便全局复用。

首先打开tailwind.config.js文件，在theme.extend.boxShadow中添加自定义的多重阴影配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        // 自定义多重阴影工具类，键名是工具类后缀，值是阴影值
        'multi': '0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05), 0 8px 16px rgba(0,0,0,0.03)',
        'multi-lg': '0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.05)'
      }
    }
  },
  plugins: []
}

配置完成后，就可以直接在元素中使用shadow-multi和shadow-multi-lg工具类：

<div class="w-64 h-32 bg-white rounded-lg shadow-multi">
  复用自定义多重阴影
</div>
<div class="w-64 h-32 bg-white rounded-lg shadow-multi-lg">
  大尺寸多重阴影
</div>

方法三：结合响应式配置

如果需要不同屏幕尺寸下使用不同的多重阴影，可以在配置中添加响应式变体，或者在任意值语法中结合响应式前缀。

配置方式如下，在boxShadow中定义不同断下的阴影值：

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'multi': {
          DEFAULT: '0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05)',
          md: '0 3px 6px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.03)',
          lg: '0 4px 8px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.05)'
        }
      }
    }
  }
}

使用时添加响应式前缀即可：

<div class="w-64 h-32 bg-white rounded-lg shadow-multi md:shadow-multi-md lg:shadow-multi-lg">
  响应式多重阴影
</div>

注意事项

• 多重阴影的渲染顺序是从前到后，先写的阴影会覆盖在后写的阴影上方，调整顺序可以改变视觉效果。
• 使用任意值语法时，阴影值中的空格必须替换为下划线，否则Tailwind无法正确解析。
• 自定义配置时，阴影值中的逗号直接保留，不需要做转义处理，Tailwind会自动处理语法转换。
• 如果阴影颜色使用了CSS变量，也可以直接写在阴影值中，例如shadow-[0_2px_4px_var(--tw-shadow-color),0_4px_8px_var(--tw-shadow-color)]。

效果对比

以下是单一阴影和多重阴影的效果差异对比：

Tailwind_CSS多重盒阴影box_shadow前端样式响应式设计修改时间：2026-07-15 17:24:30