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-sm 和 blur-lg 等工具类为元素添加模糊效果：

blur-none

blur-sm

blur-lg

blur-2xl

<!-- [!code classes: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-[<value>] 等工具类，基于完全自定义的值设置模糊：

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

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

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

这只是 blur-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 filter: blur() 工具类的前缀，即可仅在中等及以上屏幕尺寸时应用该工具类：

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

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

自定义主题

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

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

现在可以在标记中使用 blur-2xs 工具类：

<img class="blur-2xs" />

在主题文档中了解更多关于自定义主题的信息。