陰影

CSS Podcast - 017: Shadows

假設你收到要建構的設計圖片，其中包含裁剪的 T 恤相片，並附有陰影。設計師告訴您，產品圖片是動態的，可以透過內容管理系統進行更新，因此陰影也必須是動態的。圖片可以是遮陽帽、短褲或其他商品，而非 T 恤。如何使用 CSS 做到這一點？

CSS 有 box-shadow 和 text-shadow 屬性，但圖片不是文字，因此您無法使用 text-shadow。如果使用 box-shadow，陰影會出現在周圍方塊上，而不是出現在 T 恤周圍。

幸運的是，還有另一個選項：drop-shadow() 篩選器。這樣一來，您就能確切執行設計師要求的操作。在 CSS 中，陰影有許多選項，每個選項都針對不同的用途而設計。

方塊陰影

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

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;
}

文字陰影

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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 值。您可以視需要新增任意數量的陰影，方法是將多個 drop-shadow 值例項新增至 filter 屬性。每個陰影都會使用上一個陰影做為定位參考點。

進行隨堂測驗

測驗您對陰影的瞭解

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

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

元素一次只能有 13 個邊框陰影。

是
目前沒有官方限制。
否
視需要新增多個邊框陰影。