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
專屬的值?
inset
inset
也是 box-shadow
專屬的關鍵字。元素一次只允許 13 個方塊陰影。