Filters
filter: blur()
用於對元素套用模糊濾鏡的通用類別。
| Class | Styles |
|---|---|
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）
基本範例（Basic example）
使用 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" />使用自訂值（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）
在 filter: blur() 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<img class="blur-none md:blur-lg ..." src="/img/mountains.jpg" />在變體文件中了解更多關於使用變體的資訊。
自訂你的主題（Customizing your theme）
使用 --blur-* 主題變數來自訂專案中的 blur 通用類別：
@theme { --blur-2xs: 2px; }現在可以在標記中使用 blur-2xs 通用類別：
<img class="blur-2xs" src="/img/mountains.jpg" />在主題文件中了解更多關於自訂主題的資訊。