CSS Podcast - 017:陰影
假設你要構建設計 所以設計中有一件 T 恤的圖片 投射陰影。 設計人員告訴你,產品圖片是動態圖片 可透過內容管理系統更新 所以投射陰影也必須保持動態的特性而不是 T 恤 圖片可以是標誌或 Shorts,也可以是任何其他商品 如何運用 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
的值順序如下:
- 水平偏移: 一個正數會從左側往外推,而負數則會從右側推。
- 垂直偏移: 一個正數會從頂端往下推 而負數則會從底部向上往上推
- 模糊處理半徑: 數字越大,陰影就會越模糊 數字越小,陰影越大
- 範圍半徑 (選用): 數字越大,陰影就會變小,越小表示陰影越小 設為與模糊處理半徑相同的大小 (如果設為 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;
}
影響 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;
}
文字陰影
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 個方塊陰影。