滤镜：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 元素）添加投影效果非常有用。对于规则元素，您可能更希望使用 盒子阴影。

改变不透明度

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

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

使用自定义值

Use the drop-shadow-[<value>] syntax to set the 投影 based on a completely custom value:

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

For CSS variables, you can also use the drop-shadow-(<custom-property>) syntax:

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

This is just a shorthand for drop-shadow-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a filter: drop-shadow() utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

自定义投影

Use the --drop-shadow-* theme variables to customize the 投影 utilities in your project:

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

Now the drop-shadow-3xl utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.

自定义阴影颜色

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the drop-shadow-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.