filter: blur()

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-(<custom-property>)`	`filter: blur(var(<custom-property>));`
`blur-[<value>]`	`filter: blur(<value>);`

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-(<custom-property>)

filter: blur(var(<custom-property>));

blur-[<value>]

filter: blur(<value>);

示例

使用类似 blur-sm 和 blur-lg 这样的工具类来模糊元素

使用 模糊-[<value>] 语法来设置模糊基于完全自定义的值

<img class="blur-[2px] ..." src="/img/mountains.jpg" />

对于 CSS 变量，你也可以使用 模糊-(<custom-property>) 语法

<img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />

这只是 模糊-[var(<custom-property>)] 的简写形式，它会自动为你添加 var() 函数。

前缀一个 filter: blur() 工具类带有断点变体，如 md:，仅在中等屏幕尺寸及以上时应用该工具类

<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />

了解更多关于在变体文档中使用变体的信息。

使用 --blur-* 主题变量来自定义你的项目中模糊的工具类

@theme {
  --blur-2xs: 2px; 
}

现在 模糊-2xs 工具类可以在你的标记中使用

<img class="blur-2xs" src="/img/mountains.jpg" />

了解更多关于在主题文档.