CSS 陰影 (box-shadow)

box-shadow 屬性用來為元素添加陰影效果，可以製作出立體感和層次感。

基本語法

box-shadow: x偏移 y偏移 模糊半徑 擴展半徑 顏色;

x 偏移：陰影水平偏移量，正值向右，負值向左
y 偏移：陰影垂直偏移量，正值向下，負值向上
模糊半徑：可選，陰影的模糊程度，值越大越模糊
擴展半徑：可選，陰影的擴展大小，正值擴大，負值縮小
顏色：陰影顏色

基本範例

/* 簡單陰影 */
.shadow {
  box-shadow: 2px 2px 5px gray;
}

/* 無偏移的陰影（光暈效果） */
.glow {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* 帶擴展的陰影 */
.spread {
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
}

內陰影 (inset)

加上 inset 關鍵字可以製作內陰影：

.inner-shadow {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}

/* 凹陷效果 */
.sunken {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),
              inset 0 -1px 3px rgba(255,255,255,0.5);
}

多重陰影

可以用逗號分隔設定多個陰影：

.multiple {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* 複雜的陰影效果 */
.layered {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

常用陰影效果

輕微陰影

.subtle {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

卡片陰影

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

懸浮陰影

.elevated {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

深陰影

.deep {
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

彩色陰影

.color-shadow {
  box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
}

實用範例

卡片 Hover 效果

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

按鈕陰影

.btn {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

輸入框聚焦效果

input {
  border: 1px solid #ddd;
  box-shadow: none;
  transition: box-shadow 0.2s;
}

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
  outline: none;
}

圖片陰影

.image {
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-radius: 8px;
}

浮動按鈕 (FAB)

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 
    0 3px 5px rgba(0,0,0,0.2),
    0 6px 10px rgba(0,0,0,0.14);
}

內凹輸入框

.inset-input {
  background: #f5f5f5;
  border: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

移除陰影

.no-shadow {
  box-shadow: none;
}

文字陰影 (text-shadow)

文字陰影使用 text-shadow 屬性，語法類似但沒有擴展半徑和 inset：

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 多重文字陰影 */
.fancy-text {
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 0 #ddd;
}

/* 發光文字 */
.glow-text {
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

效能考量

陰影會增加瀏覽器的渲染負擔
大量使用或過度模糊的陰影可能影響效能
動畫陰影時，考慮使用 will-change: box-shadow 來優化