陰影

陰影系統提供從細微到強烈的層次變化，以及品牌色陰影效果。

陰影展示

shadow-light

0 1px 3px rgba(0, 0, 0, 0.08)

shadow-medium

0 4px 12px rgba(0, 0, 0, 0.12)

shadow-heavy

0 8px 24px rgba(0, 0, 0, 0.16)

shadow-blue

0 4px 16px rgba(1, 132, 255, 0.2)

shadow-yellow

0 4px 16px rgba(250, 215, 90, 0.3)

shadow-card-hover

0 12px 32px rgba(0, 0, 0, 0.15)

使用方式

Tailwind CSS

<div className="shadow-light">輕微陰影</div>
<div className="shadow-medium">中等陰影</div>
<div className="shadow-heavy">強烈陰影</div>
<div className="shadow-blue">藍色品牌陰影</div>
<div className="shadow-yellow">黃色品牌陰影</div>
<div className="shadow-card-hover">卡片 hover 陰影</div>

CSS Custom Properties

box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-blue);