設計變數
陰影
針對淺色與深色調整的多層浮起陰影。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
shadow-<name> | box-shadow: var(--shadow-<name>); |
shadow-<name> 會設定完整的 box-shadow 值。兩個陰影 class 不會接合各自的清單，勝出的宣告會提供整個陰影。
值
每個 token 儲存一份以逗號分隔的原生陰影清單。展開值即可檢查每一層。淺色與深色使用相同的偏移、模糊與擴張長度，差別在 light-dark() 的色彩。
| 類別 | 值 |
|---|---|
shadow-xs |
|
shadow-sm |
|
shadow-md |
|
shadow-lg |
|
shadow-xl |
|
shadow-2xl |
|
shadow-inset |
|
比較全部陰影值
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlshadow-2xlshadow-inset陰影改變繪製，不改變版面配置
shadow-xs 與 shadow-xl 會在同一個盒子周圍產生不同的繪製範圍，但都不會為陰影預留空間；後方元素的位置與間隙仍維持不變。
陰影繪製不會預留版面空間
表面的幾何尺寸完全相同，與下一個元素的間隙都是 16px，只有陰影 token 改變。尺標量測的是盒子之間的間隙，不是陰影的可見邊緣。
文字說明
- 兩欄都包含相同的表面與後方元素，尺寸、內距與 16px 的版面間隙完全相同。
- 左側表面使用預設 shadow-xs token。右側使用 shadow-xl，會在更寬的區域繪製更多層陰影。
- 兩欄的下一個元素都從相同高度開始。盒子陰影不會改變版面配置使用的尺寸或間距。
- 兩個陰影都使用實際預設值。色彩會配合圖片的配色方案調整，偏移、模糊與擴張長度則維持不變。間隙尺標是檢查用標註。
token 清單中的第一個陰影會繪製在後續陰影上方。shadow-inset 使用內陰影，六個尺寸等級則使用外陰影。這些 token 不會設定表面色彩、圓角、堆疊順序或裁切規則。
元素使用的配色方案會選取各個 light-dark() 色彩，因此可以在不改變陰影長度、也不需要另一個 utility class 的情況下改變繪製結果。區域配色方案的選取方式請見色彩角色。
若要移除陰影，請使用原生宣告 (box-shadow:none)。若要結合內陰影與外陰影，請定義一個同時包含兩份清單的 token；分開的 class 不會合併它們。
另見 色彩角色與原生陰影繪製與版面配置.
用法
讓靜置表面維持低浮起程度，只抬高懸浮於其上的物件。
Card
On the page
- Duplicate
- Rename
- Archive
<div> <article class="… shadow-xs"> <p>Card</p> <p>On the page</p> </article> <ul class="… shadow-lg"> <li>Duplicate</li> <li>Rename</li> <li>Archive</li> </ul></div>產生的 CSS
@layer theme { :root, :host { --shadow-xs: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .04)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)); --shadow-lg: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .3)) }}@layer utilities { .shadow-lg { box-shadow: var(--shadow-lg) } .shadow-xs { box-shadow: var(--shadow-xs) }}自訂
修改預設值或新增 token：--shadow-card 會建立 shadow-card。
@theme { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5));}產生的 CSS
@layer theme { :root, :host { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5)) }}@layer utilities { .shadow-card { box-shadow: var(--shadow-card) }}