filter: drop-shadow()

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 drop-shadow-sm 和 drop-shadow-xl 等工具为元素添加阴影：

¥Use utilities like drop-shadow-sm and drop-shadow-xl to add a drop shadow to an element:

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

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

¥This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use box shadow instead.

使用自定义值(Using a custom value)

¥Using a custom value

使用 drop-shadow-[<value>] 语法 根据完全自定义的值设置 drop shadow：

<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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 filter: drop-shadow() 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

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

现在 drop-shadow-3xl 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。