濾鏡
filter: drop-shadow()
用於將陰影濾鏡應用於元素的工具類。
| 類別 | 樣式 |
|---|---|
drop-shadow-xs | filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */ |
drop-shadow-sm | filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */ |
drop-shadow-md | filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */ |
drop-shadow-lg | filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */ |
drop-shadow-xl | filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */ |
drop-shadow-2xl | filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */ |
drop-shadow-none | filter: drop-shadow(0 0 #0000); |
drop-shadow-(<custom-property>) | filter: drop-shadow(var(<custom-property>)); |
drop-shadow-[<value>] | filter: drop-shadow(<value>); |
範例
基本範例
使用如 drop-shadow-sm 和 drop-shadow-xl 等工具類來為元素添加陰影。
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
<svg class="drop-shadow-md ..."> <!-- ... --></svg><svg class="drop-shadow-lg ..."> <!-- ... --></svg><svg class="drop-shadow-xl ..."> <!-- ... --></svg>這對於將陰影應用於不規則形狀（如文字和 SVG 元素）非常有用。對於將陰影應用於規則元素，您可能需要改用box shadow。
使用自訂值
使用 drop-shadow-[<value>] 語法 來設定陰影基於完全自訂的值
<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() 函式。
響應式設計
前綴一個 filter: drop-shadow() 工具類 使用像是 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上
<svg class="drop-shadow-md md:drop-shadow-xl ..."> <!-- ... --></svg>了解更多關於在變體文件中使用變體。
自訂您的主題
使用 --drop-shadow-* 主題變數來自訂您的專案中的陰影 陰影
@theme { --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }現在 drop-shadow-3xl 工具程式可以在您的標記中使用
<svg class="drop-shadow-3xl"> <!-- ... --></svg>在 主題文件.
