box-shadow

範例（Examples）

基本範例（Basic example）

使用 shadow-sm 和 shadow-lg 等通用類別來為元素套用不同大小的外部盒子陰影：

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

變更透明度（Changing the opacity）

使用透明度修飾符來調整盒子陰影的透明度：

<div class="shadow-xl ..."></div><div class="shadow-xl/20 ..."></div><div class="shadow-xl/30 ..."></div>

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

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

使用 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%，但你可以使用透明度修飾符來調整。

新增內嵌陰影（Adding an inset shadow）

使用 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-sm/50）來調整內嵌陰影的透明度。預設的內嵌陰影透明度相當低（5%），因此增加透明度（例如到 50%）會使內嵌陰影更加明顯。

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

使用 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%，但你可以使用透明度修飾符來調整。

新增環形（Adding a ring）

使用 ring 或 ring-2、ring-4 等 ring-<number> 通用類別來為元素套用實心盒子陰影：

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

預設情況下，環形會匹配套用元素的 currentColor。

設定環形顏色（Setting the ring color）

使用 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%，但你可以使用透明度修飾符來調整。

新增內嵌環形（Adding an inset ring）

使用 inset-ring 或 inset-ring-2、inset-ring-4 等 inset-ring-<number> 通用類別來為元素套用實心內嵌盒子陰影：

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

預設情況下，內嵌環形會匹配套用元素的 currentColor。

設定內嵌環形顏色（Setting the inset ring color）

使用 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%，但你可以使用透明度修飾符來調整。

移除盒子陰影（Removing a box shadow）

使用 shadow-none、inset-shadow-none、ring-0 和 inset-ring-0 通用類別來移除元素現有的盒子陰影：

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

使用自訂值（Using a custom value）

使用 shadow-[<value>]、inset-shadow-[<value>]、ring-[<value>]、 和 inset-ring-[<value>] 等通用類別，根據完全自訂的值來設定 box shadow：

<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() 函式。

響應式設計（Responsive design）

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

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

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

自訂你的主題（Customizing your theme）

自訂陰影（Customizing shadows）

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

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

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

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

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

自訂內嵌陰影（Customizing inset shadows）

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

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

現在可以在標記中使用 inset-shadow-md 通用類別：

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

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

自訂陰影顏色（Customizing shadow colors）

使用 --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>