模糊

​基本用法

​模糊元素

使用 blur-{amount?} 工具程式模糊元素。

blur-none

blur-sm

blur-lg

blur-2xl

<div class="blur-none ...">
  <!-- ... -->
</div>
<div class="blur-sm ...">
  <!-- ... -->
</div>
<div class="blur-lg ...">
  <!-- ... -->
</div>
<div class="blur-2xl ...">
  <!-- ... -->
</div>

​移除濾鏡

若要一次移除元素上的所有濾鏡，請使用 filter-none 工具

<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

當您想要有條件地移除濾鏡時，這會很有用，例如在滑鼠移入或特定斷點時。

​有條件地套用

​滑鼠移入、焦點和其他狀態

Tailwind 讓您可以在不同的狀態中使用變異修飾符有條件地套用工具類別。例如，使用 hover:blur-lg 僅在滑鼠移入時套用 blur-lg 工具。

<div class="blur hover:blur-lg">
  <!-- ... -->
</div>

若要取得所有可用狀態修飾符的完整清單，請查看 滑鼠移入、焦點和其他狀態 文件。

​斷點和媒體查詢

您也可以使用變異修改器來針對媒體查詢，例如回應式斷點、暗色模式、偏好減少動作等。例如，使用 md:blur-lg 僅在中型螢幕大小及以上套用 blur-lg 實用程式。

<div class="blur md:blur-lg">
  <!-- ... -->
</div>

若要深入了解，請查看關於 回應式設計、 暗色模式 和 其他媒體查詢修改器 的文件。

​使用自訂值

​自訂您的主題

預設情況下，Tailwind 包含一些通用 blur 實用程式。您可以透過編輯 tailwind.config.js 檔案中的 theme.blur 或 theme.extend.blur 來自訂這些值。

module.exports = {
  theme: {
    extend: {
      blur: {
        xs: '2px',
      }
    }
  }
}

在主題自訂文件瞭解更多關於自訂預設主題的資訊。

​任意值

如果你需要使用一次性的 blur 值，而將其包含在你的主題中沒有意義，請使用方括號來使用任何任意值動態產生一個屬性。

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

在任意值文件瞭解更多關於任意值支援的資訊。