陰影

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

CSS 具有 box-shadowtext-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
水平偏移
模糊半徑
擴散半徑

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