filter: drop-shadow()

範例（Examples）

基本範例（Basic example）

使用 drop-shadow-sm 和 drop-shadow-xl 等通用類別來為元素新增投影：

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

這對於為不規則形狀（如文字和 SVG 元素）套用陰影非常有用。若要為一般元素套用陰影，你可能會想使用 box shadow。

變更透明度（Changing the opacity）

使用透明度修飾符來調整投影的透明度：

<svg class="fill-white drop-shadow-xl ...">...</svg><svg class="fill-white drop-shadow-xl/25 ...">...</svg><svg class="fill-white drop-shadow-xl/50 ...">...</svg>

預設的投影透明度相當低（15% 或更少），因此增加透明度（例如到 50%）會使投影更加明顯。

設定陰影顏色（Setting the shadow color）

使用 drop-shadow-indigo-500 和 drop-shadow-cyan-500/50 等通用類別來變更投影的顏色：

<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

預設情況下，彩色陰影的透明度為 100%，但你可以使用透明度修飾符來調整。

移除投影（Removing a drop shadow）

使用 drop-shadow-none 通用類別來移除元素現有的投影：

<svg class="drop-shadow-lg dark:drop-shadow-none">  <!-- ... --></svg>

使用自訂值（Using a custom value）

使用 drop-shadow-[<value>] 語法，根據完全自訂的值來設定 drop shadow：

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

對於 CSS 變數，你也可以使用 drop-shadow-(<custom-property>) 語法：

<svg class="drop-shadow-(--my-drop-shadow) ...">  <!-- ... --></svg>

這只是 drop-shadow-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 filter: drop-shadow() 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。

自訂你的主題（Customizing your theme）

自訂投影（Customizing drop shadows）

使用 --drop-shadow-* 主題變數來自訂專案中的 drop shadow 通用類別：

@theme {  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

現在可以在標記中使用 drop-shadow-3xl 通用類別：

<svg class="drop-shadow-3xl">  <!-- ... --></svg>

在主題文件中了解更多關於自訂主題的資訊。

自訂陰影顏色（Customizing shadow colors）

使用 --color-* 主題變數來自訂專案中的 color 通用類別：

@theme {  --color-regal-blue: #243c5a; }

現在可以在標記中使用 drop-shadow-regal-blue 通用類別：

<svg class="drop-shadow-regal-blue">  <!-- ... --></svg>

在主題文件中了解更多關於自訂主題的資訊。