滤镜
filter: blur()
用于将模糊滤镜应用于元素的实用工具。
| 类 | 样式 |
|---|---|
blur-xs | filter: blur(var(--blur-xs)); /* 4px */ |
blur-sm | filter: blur(var(--blur-sm)); /* 8px */ |
blur-md | filter: blur(var(--blur-md)); /* 12px */ |
blur-lg | filter: blur(var(--blur-lg)); /* 16px */ |
blur-xl | filter: blur(var(--blur-xl)); /* 24px */ |
blur-2xl | filter: blur(var(--blur-2xl)); /* 40px */ |
blur-3xl | filter: blur(var(--blur-3xl)); /* 64px */ |
blur-none | filter: ; |
blur-(<自定义属性>) | filter: blur(var(<自定义属性>)); |
blur-[<值>] | filter: blur(<值>); |
示例
基本示例
使用诸如 blur-sm 和 blur-lg 之类的实用工具来模糊元素
blur-none
blur-sm
blur-lg
blur-2xl
<img class="blur-none" src="/img/mountains.jpg" /><img class="blur-sm" src="/img/mountains.jpg" /><img class="blur-lg" src="/img/mountains.jpg" /><img class="blur-2xl" src="/img/mountains.jpg" />使用自定义值
使用 blur-[<值>] 语法 来设置blur基于完全自定义的值
<img class="blur-[2px] ..." src="/img/mountains.jpg" />对于 CSS 变量，你也可以使用 blur-(<自定义属性>) 语法
<img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />这只是 blur-[var(<自定义属性>)] 的简写，它会自动为你添加 var() 函数。
响应式设计
前缀一个 filter: blur() 实用工具 带有诸如 md: 之类的断点变体，仅在中等 屏幕尺寸及以上应用该实用工具
<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />在变体文档中了解有关使用变体的更多信息。
自定义主题
使用 --blur-* 主题变量来自定义项目中的blur 实用工具
@theme { --blur-2xs: 2px; }现在 blur-2xs 实用工具可以在你的标记中使用
<img class="blur-2xs" src="/img/mountains.jpg" />