陰影

CSS Podcast - 017：陰影

假設你要構建設計 所以設計中有一件 T 恤的圖片 投射陰影。 設計人員告訴你，產品圖片是動態圖片 可透過內容管理系統更新 所以投射陰影也必須保持動態的特性而不是 T 恤 圖片可以是標誌或 Shorts，也可以是任何其他商品 如何運用 CSS 達成上述目標？

CSS 具有 box-shadow 和 text-shadow 資源， 但圖片不是文字，因此無法使用 text-shadow。 如果使用 box-shadow，陰影就會位在周圍的方塊中。 而「不是」在 T 恤周圍。

幸好還有另一個選項： drop-shadow() 篩選器。 這可讓您完全符合設計人員要求的功能。 CSS 中的陰影有多種選擇 分別適合不同用途

方塊陰影

瀏覽器支援

  • Chrome：10.
  • Edge：12.
  • Firefox：4.
  • Safari：5.1。

資料來源

box-shadow 屬性是用於在 HTML 元素方塊中新增陰影。 適用於區塊元素和內嵌元素。

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow 的值順序如下：

  1. 水平偏移： 一個正數會從左側往外推，而負數則會從右側推。
  2. 垂直偏移： 一個正數會從頂端往下推 而負數則會從底部向上往上推
  3. 模糊處理半徑： 數字越大，陰影就會越模糊 數字越小，陰影越大
  4. 範圍半徑 (選用)： 數字越大，陰影就會變小，越小表示陰影越小 設為與模糊處理半徑相同的大小 (如果設為 0)。
  5. 顏色： 任何有效的顏色值。 如未定義，系統會使用計算的文字顏色。

如要讓方塊陰影變成內陰影， 而不是預設的外部陰影 在其他屬性「之前」新增 inset 關鍵字。

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

多個陰影

你可以使用 box-shadow 新增任意數量的陰影。 為達到這個目的，請新增以半形逗號分隔的值集集合：

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

影響 Box-shadow 的屬性

在方塊中新增 border-radius 也會影響方塊陰影的形狀。 這是因為 CSS 會根據方塊形狀建立陰影 就像光線指向那東西一樣

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

如果包含 box-shadow 的盒子位於包含 overflow: hidden 的容器中， 陰影不會因溢出問題而溢出

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

文字陰影

瀏覽器支援

  • Chrome：2.
  • Edge：12.
  • Firefox：3.5。
  • Safari：1.1.

資料來源

text-shadow 屬性與 box-shadow 屬性非常類似。 這項功能僅適用於文字節點。

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow 的值與 box-shadow 相同，順序也相同。 唯一的差別在於 text-shadow 不含 spread 值，且不包含 inset 關鍵字。

新增 box-shadow 時，系統會將其裁剪至您的方塊形狀。 但 text-shadow 沒有剪輯。 也就是說，如果文字完全或半透明 反而可以清楚看見陰影

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

多個陰影

你可以使用 text-shadow 新增任意數量的陰影， 和 box-shadow 一樣 新增要以半形逗號分隔的值集集合。 你也可以製作一些超酷的文字效果 例如 3D 文字

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

投射陰影

如果想產生隨著圖片任何潛在曲線變化的投射陰影， 請使用 CSS drop-shadow 篩選器 這個陰影會套用到 Alpha 遮罩上 因此在剪影圖片中加入陰影時 如本單元簡介所示

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
，瞭解如何調查及移除這項存取權。

drop-shadow 篩選器的值與 box-shadow 相同，但不允許 inset 關鍵字和 spread 值。你可隨意添加陰影，沒有數量限制 方法是在 filter 屬性中加入多個 drop-shadow 值。 每個陰影都會使用最後一個陰影做為定位參考點。

隨堂測驗

測試你對陰影的瞭解

下列哪個陰影值是 box-shadow 的專屬值？

水平偏移
請再試一次！
垂直偏移
請再試一次！
模糊半徑
請再試一次！
擴散半徑
🎉
顏色
請再試一次！
inset
請再試一次！inset 是 box-shadow 專屬的關鍵字。

一個元素一次只允許使用 13 個方塊陰影。

是
點數並無官方限制。
否
視需要新增多個方塊陰影，數量不限。