过滤
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>); |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 blur-sm 和 blur-lg 等工具模糊元素：
¥Use utilities like blur-sm and blur-lg to blur an element:
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" />使用自定义值(Using a custom value)
¥Using a custom value
使用 blur-[<value>] 语法 根据完全自定义的值设置 blur：
<img class="blur-[2px] ..." src="/img/mountains.jpg" />对于 CSS 变量，还可以使用 blur-(<custom-property>) 语法：
<img class="blur-(--my-blur) ..." src="/img/mountains.jpg" />这只是简写，用于 blur-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 filter: blur() 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
¥Customizing your theme
使用 --blur-* 主题变量来自定义项目中的 blur 工具：
@theme { --blur-2xs: 2px; }现在 blur-2xs 工具可用于你的标记：
<img class="blur-2xs" src="/img/mountains.jpg" />在此详细了解如何自定义主题： 主题文档。