Skip to content

Tailwind CSS - 投影

使用 `Drop Shadow` 进行高级样式设计

Tailwind 的 drop-shadow 工具类会为元素应用 filter 滤镜，创建一个与内容本身形状（包括透明度）相符的阴影。这与 box-shadow 工具类有着根本区别，对于样式化非矩形元素（如 SVG、透明 PNG 图像，甚至是文本）非常强大。

关键区别：`drop-shadow` 与 `shadow`

了解何时使用 drop-shadow 以及标准 shadow（它使用 box-shadow）是关键：

shadow (box-shadow)：将阴影应用于元素的矩形边框（bounding box）。它忽略透明度，非常适合卡片、按钮和其他矩形容器。
drop-shadow (filter: drop-shadow())：应用一个阴影，该阴影遵循元素可见内容的精确轮廓。它尊重透明度，非常适合复杂的形状。

Drop Shadow 工具类

Tailwind 提供了一系列预定义的 drop-shadow 工具类，与标准 shadow 类的尺寸相呼应。

类名	CSS 滤镜属性
`drop-shadow-sm`	`filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));`
`drop-shadow`	`filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));`
`drop-shadow-md`	`filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));`
`drop-shadow-lg`	`filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));`
`drop-shadow-xl`	`filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));`
`drop-shadow-2xl`	`filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));`
`drop-shadow-none`	`filter: none;`

可视化差异：一个实用示例

此示例生动地展示了 drop-shadow 在复杂 SVG 形状上的强大功能，与标准 shadow 形成了鲜明对比。

示例：SVG 和图像阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Drop Shadow vs. Box Shadow</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8 flex flex-col items-center justify-center min-h-screen">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-16">

        <!-- 卡片 1：SVG 上的 `drop-shadow` -->
        <div class="text-center">
            <h3 class="text-lg font-semibold text-slate-700 mb-4">Using `drop-shadow-xl`</h3>
            <svg class="w-32 h-32 text-blue-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-sm text-slate-500 mt-4">The shadow perfectly follows the shape of the SVG.</p>
        </div>

        <!-- 卡片 2：同一 SVG 上的 `shadow` (box-shadow) -->
        <div class="text-center">
            <h3 class="text-lg font-semibold text-slate-700 mb-4">Using `shadow-xl`</h3>
            <svg class="w-32 h-32 text-blue-500 shadow-xl rounded-full" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-sm text-slate-500 mt-4">The shadow is applied to the bounding box, not the shape.</p>
        </div>

    </div>

</body>
</html>

自定义你的 Drop Shadow

对于独特的设计需求，你可以轻松地将自己的 drop-shadow 值添加到 tailwind.config.js 文件中。这对于匹配特定的设计系统非常有用。

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        'glow': [
          '0 0 5px rgba(255, 255, 255, 0.3)',
          '0 0 10px rgba(255, 255, 255, 0.2)'
        ]
      }
    }
  }
}

性能与最佳实践

性能：像 drop-shadow 这样的 CSS 滤镜在计算上可能比 box-shadow 更耗费资源，尤其是在动画中。在它们能提供清晰视觉价值的地方使用它们，但要避免在复杂、动态的界面上过度使用。
堆叠：你可以通过在配置文件中提供一个数组来堆叠多个阴影，如上面 'glow' 示例所示。
硬件加速：对于涉及滤镜的动画，考虑添加 transform-gpu 或 will-change-filter 工具类，以提示浏览器使用硬件加速，这可以使性能更流畅。