陰影

​基本用法

​加入陰影

使用 drop-shadow-{amount} 輔助工具可以為元素加入陰影。

<div class="drop-shadow-md ...">
  <!-- ... -->
</div>
<div class="drop-shadow-lg ...">
  <!-- ... -->
</div>
<div class="drop-shadow-xl ...">
  <!-- ... -->
</div>
<div class="drop-shadow-2xl ...">
  <!-- ... -->
</div>

這對於將陰影套用至不規則形狀（例如文字和 SVG 元素）很有用。若要將陰影套用至一般元素，建議改用 方框陰影。

​移除濾鏡

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

<div class="blur-md invert drop-shadow-xl md:filter-none">
  <!-- ... -->
</div>

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

​有條件套用

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

Tailwind 讓您可以使用變異修飾詞在不同狀態下有條件地套用實用程式類別。例如，使用 hover:drop-shadow-xl 僅在滑鼠移入時套用 drop-shadow-xl 實用程式。

<div class="drop-shadow-md hover:drop-shadow-xl">
  <!-- ... -->
</div>

如需所有可用狀態修飾詞的完整清單，請查看 滑鼠移入、焦點和其他狀態 文件。

​斷點和媒體查詢

您也可以使用變異修飾詞來鎖定媒體查詢，例如回應式斷點、暗色模式、偏好減少動作等。例如，使用 md:drop-shadow-xl 僅在中型螢幕尺寸及以上套用 drop-shadow-xl 實用程式。

<div class="drop-shadow-md md:drop-shadow-xl">
  <!-- ... -->
</div>

如需進一步了解，請查看 回應式設計、 暗色模式 和 其他媒體查詢修飾詞 的文件。

​使用自訂數值

​自訂您的佈景主題

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

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

在 佈景主題自訂 文件中進一步瞭解如何自訂預設佈景主題。

​任意數值

如果您需要使用一次性的 drop-shadow 數值，而且不適合包含在您的佈景主題中，請使用方括號來使用任意數值動態產生一個屬性。

<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">
  <!-- ... -->
</div>

在 任意數值 文件進一步瞭解任意數值支援。