滤镜
filter: drop-shadow()
用于将阴影滤镜应用于元素的实用工具。
| 类 | 样式 |
|---|---|
drop-shadow-xs | filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */ |
drop-shadow-sm | filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */ |
drop-shadow-md | filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */ |
drop-shadow-lg | filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */ |
drop-shadow-xl | filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */ |
drop-shadow-2xl | filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */ |
drop-shadow-none | filter: drop-shadow(0 0 #0000); |
drop-shadow-(<自定义属性>) | filter: drop-shadow(var(<自定义属性>)); |
drop-shadow-[<值>] | filter: drop-shadow(<值>); |
示例
基本示例
使用 drop-shadow-sm 和 drop-shadow-xl 等实用工具为元素添加阴影
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
<svg class="drop-shadow-md ..."> <!-- ... --></svg><svg class="drop-shadow-lg ..."> <!-- ... --></svg><svg class="drop-shadow-xl ..."> <!-- ... --></svg>这对于将阴影应用于不规则形状（如文本和 SVG 元素）很有用。 对于将阴影应用于常规元素，您可能需要使用 盒子阴影。
使用自定义值
使用 drop-shadow-[<值>] 语法 来设置阴影基于完全自定义的值
<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ..."> <!-- ... --></svg>对于 CSS 变量，您还可以使用 drop-shadow-(<自定义属性>) 语法
<svg class="drop-shadow-(--my-drop-shadow) ..."> <!-- ... --></svg>这只是 drop-shadow-[var(<自定义属性>)] 的简写形式，它会自动为您添加 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>在 主题文档.
