filter: drop-shadow()

示例

基本示例

使用类似 drop-shadow-sm 和 drop-shadow-xl 这样的工具类，为元素添加阴影效果

<svg class="drop-shadow-md ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-lg ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-xl ...">
  <!-- ... -->
</svg>

这对于将阴影应用于不规则形状（如文本和 SVG 元素）非常有用。对于将阴影应用于规则元素，您可能需要使用 box shadow 代替。

更改不透明度

使用不透明度修饰符来调整阴影的不透明度

<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>

默认的阴影不透明度非常低（15% 或更低），因此增加不透明度（例如到 50%）将使阴影效果更明显。

设置阴影颜色

使用类似 drop-shadow-indigo-500 和 drop-shadow-cyan-500/50 这样的工具类来更改阴影的颜色

<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

默认情况下，彩色阴影的不透明度为 100%，但您可以使用不透明度修饰符来调整它。

移除阴影

使用 drop-shadow-none 工具类从元素中移除已有的阴影

<svg class="drop-shadow-lg dark:drop-shadow-none">
  <!-- ... -->
</svg>

使用自定义值

使用 drop-shadow-[<value>] 语法 来设置阴影基于完全自定义的值

<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">
  <!-- ... -->
</svg>

对于 CSS 变量，您还可以使用 drop-shadow-(<custom-property>) 语法

<svg class="drop-shadow-(--my-drop-shadow) ...">
  <!-- ... -->
</svg>

这只是 drop-shadow-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

前缀一个 filter: drop-shadow() 工具类 带有断点变体，如 md:，以仅在中等 屏幕尺寸及以上尺寸应用该工具类

<svg class="drop-shadow-md md:drop-shadow-xl ...">
  <!-- ... -->
</svg>

在变体文档中了解有关使用变体的更多信息。

自定义你的主题

自定义阴影

使用 --drop-shadow-* 主题变量来自定义阴影 项目中的工具类

@theme {
  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); 
}

现在 drop-shadow-3xl 工具类可以在你的标记中使用

<svg class="drop-shadow-3xl">
  <!-- ... -->
</svg>

在 主题文档.

中了解有关自定义主题的更多信息

自定义阴影颜色颜色 项目中的工具类

@theme {
  --color-regal-blue: #243c5a; 
}

现在 drop-shadow-使用 --color-* 主题变量来自定义 工具类可以在你的标记中使用

<svg class="drop-shadow-regal-blue">
  <!-- ... -->
</svg>

在 主题文档.