CSS Podcast - 017: Shadows
假設你收到要建構的設計，其中有一張含有投射陰影的 T 恤圖片。設計人員會告知您產品圖片是動態的，而且可透過內容管理系統更新，因此投射陰影也必須動態。圖片不是 T 恤，而是長、短褲或任何其他項目。要如何運用 CSS？
CSS 具備 box-shadow 和 text-shadow 屬性，但圖片並非文字，因此無法使用 text-shadow。如果使用 box-shadow，陰影位在周圍的方塊內，而「不是」T 恤周圍。
幸好，還有另一個選項：drop-shadow() 篩選器。如此一來，您就能確實執行設計人員要求的項目。CSS 中的陰影有許多選項，每個選項都是為不同的用途而設計。
方塊陰影
box-shadow 屬性是用來在 HTML 元素的方塊中新增陰影。這項技術適用於區塊元素和內嵌元素。
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
box-shadow 的值的順序如下：
- 水平偏移：正數會從左側將其推入，負數則會從右側推入。
- 垂直偏移：正數會將數字從頂端向下推，而負數則會從底部向上推。
- 模糊半徑：數字越大，陰影就會越模糊，陰影越小代表越銳利的陰影。
- Spread 半徑 (選用)：數字越大，陰影越大，陰影越小越減少，使其與模糊半徑的大小相同 (如果設為 0)。
- 顏色：任何有效顏色值。如未定義，則會使用計算的文字顏色。
如要將方塊設為陰影 (而非預設的外陰影)，請在其他屬性「之前」新增 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;
}
影響方塊陰影的屬性
在方塊中加入 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;
}
文字陰影
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 專屬的值？
insetinset 也是 box-shadow 專屬的關鍵字。元素一次只允許 13 個方塊陰影。