box-shadow (陰影)

範例

基本範例

使用像是 shadow-sm 和 shadow-lg 的工具類別，來對元素套用不同尺寸的外陰影

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

設定陰影顏色

使用像是 shadow-indigo-500 和 shadow-cyan-500/50 的工具類別，來變更陰影的顏色

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

預設情況下，彩色陰影的不透明度為 100%，但您可以使用不透明度修改器來調整此值。

新增內陰影

使用像是 inset-shadow-xs 和 inset-shadow-sm 的工具類別，來對元素套用內陰影

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

這些工具類別對於像是表單控制項或容器之類的項目非常有用。

設定內陰影顏色

使用像是 inset-shadow-indigo-500 和 inset-shadow-cyan-500/50 的工具類別，來變更內陰影的顏色

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

預設情況下，彩色陰影的不透明度為 100%，但您可以使用不透明度修改器來調整此值。

新增環線

使用 ring 和 ring-<number> 工具類別，像是 ring-2 和 ring-4，來對元素套用實心陰影

<button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

預設情況下，環線會符合套用它們的元素的 currentColor。

設定環線顏色

使用像是 ring-indigo-500 和 ring-cyan-500/50 的工具類別，來變更環線的顏色

<button class="ring-2 ring-blue-500 ...">Subscribe</button><button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

預設情況下，環線的不透明度為 100%，但您可以使用不透明度修改器來調整此值。

新增內環線

使用 inset-ring 和 inset-ring-<number> 工具類別，像是 inset-ring-2 和 inset-ring-4，來對元素套用實心內陰影

<button class="inset-ring ...">Subscribe</button><button class="inset-ring-2 ...">Subscribe</button><button class="inset-ring-4 ...">Subscribe</button>

預設情況下，內環線會符合套用它們的元素的 currentColor。

設定內環線顏色

使用像是 inset-ring-indigo-500 和 inset-ring-cyan-500/50 的工具類別，來變更內環線的顏色

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

預設情況下，內環線的不透明度為 100%，但您可以使用不透明度修改器來調整此值。

移除陰影

使用 shadow-none、inset-shadow-none、ring-0 和 inset-ring-0 工具類別，來從元素移除現有的陰影

<div class="shadow-none ..."></div>

使用自訂值

使用像是 shadow-[<value>]、inset-shadow-[<value>]、ring-[<value>]、和 inset-ring-[<value>]來設定陰影基於完全自訂的值

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

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

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

這只是 shadow-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。

響應式設計

前綴一個 box-shadow 工具類別 使用斷點變體（例如 md:）僅在中等 螢幕尺寸及以上套用該工具類別

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

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

自訂您的主題

自訂陰影

使用 --shadow-* 主題變數來客製化您專案中的陰影 工具類別

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

現在 shadow-3xl 工具類別可以用在您的標記中

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

在 主題文件.

中了解更多關於客製化主題的資訊

自訂內陰影使用 --inset-shadow-* 主題變數來客製化 工具類別

@theme {  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

現在 內陰影-inset-shadow 工具類別可以用在您的標記中

<div class="inset-shadow-md">  <!-- ... --></div>

在 主題文件.

自訂陰影顏色

使用 --color-* 主題變數來客製化color (顏色) 工具類別

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

現在可以使用像 shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue,和 inset-ring-regal-blue這樣的工具類別在您的標記中

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

在 主題文件.