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.

改变透明度(Changing the opacity)

¥Changing the opacity

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

¥Use the opacity modifier to adjust the opacity of the drop 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%）会使阴影更加明显。

¥The default drop shadow opacities are quite low (15% or less), so increasing the opacity (to like 50%) will make the drop shadows more pronounced.

设置阴影颜色(Setting the shadow color)

¥Setting the shadow color

使用 drop-shadow-indigo-500 和 drop-shadow-cyan-500/50 等工具更改阴影的颜色：

¥Use utilities like drop-shadow-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:

<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%，但你可以使用透明度修饰符进行调整。

¥By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

移除阴影(Removing a drop shadow)

¥Removing a drop shadow

使用 drop-shadow-none 工具移除元素中现有的阴影：

¥Use the drop-shadow-none utility to remove an existing drop shadow from an element:

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

使用自定义值(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

自定义阴影(Customizing drop shadows)

¥Customizing drop shadows

使用 --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>

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

自定义阴影颜色(Customizing shadow colors)

¥Customizing shadow colors

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

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

现在 drop-shadow-regal-blue 工具可用于你的标记：

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

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