iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
1
自我挑戰組

前端新手進化史系列 第 10

番外篇 - 胡搞 box-shadow (中)

文章將陸續整理並更新至個人部落格


咦,box-shadowbox model 唸起來很像? 他們的確有關聯沒錯!
還記得 box model 是由四個部分:內容區(content)、內距(padding)、邊框(border)與外距(margin)所組成,而每個部分都有屬於自己的外邊緣(edge)。



box-shadow 在任何偏移設定 blur-radius 和 spread-distance 時,陰影並不存在,而是完全與元素重疊,即使元素背景顏色是透明的仍看不見。若元素有邊框,則此時陰影大小為邊框邊緣(border edge)所圍繞的範圍陰影大小為內距邊緣(padding edge)所圍繞的範圍。

box-shadow : x 軸 | y 軸| 模糊半徑 | 擴散距離 | 顏色 | (inset)

註: 陰影 inset 可加在最前面最後面




例如,有個 div,它有 15px 的灰色邊框,現在讓它的紅色陰影向偏移 1px,會發現陰影「看起來」像是從 border edge 開始向外繪製。

<div class="box"></div>
.box {
    border: 15px dashed grey;
    box-shadow: 1px 0 0 0 red;
}

現在將外陰影改為陰影(inset),讓紅色內陰影向偏移 1px,會發現陰影「看起來」像是從 padding edge 開始向繪製。

.box {
    border: 15px dashed grey;
    box-shadow: inset -1px 0 0 0 red;
}




小試身手

現在來感受一下 box-shadow 的魅力吧!

外陰影在 x 軸與 y 軸皆無任何偏移,也無模糊,但讓陰影擴大 20px (即第四個值)。
⇒ 原本重疊在元素後面的陰影在上下左右了 20px。

橘色陰影向偏移 30px。
⇒ y = 30px

.box {
    box-shadow: 0 30px orange;
}

橘色陰影向偏移 50px、向偏移 20px。
⇒ x = -50px、y = -20px

.box {
    box-shadow: -50px -20px orange;
}

橘色陰影向偏移 50px、向偏移 20px。
⇒ x = -50px、y = -20px

.box {
    box-shadow: inset -50px -20px orange;
}


同時使用多個陰影,依序橘色紅色藍色
⇒ 以逗號隔開,注意寫愈前面 shadow 的 z-index 值愈大

box {
    box-shadow: 50px -20px orange, -50px 40px #B71B1C, -100px -100px #1A286A;
}

陰影整個飛出去
⇒ 偏移超過元素的長度高度


陰影會和 border形狀一模一樣!

陰影可以做動畫範例連結


[最後補充]

橘色陰影會在內容(content)層,在背景(background)層唷。(小狗為一張 background-image)範例連結

不知小試身手完有沒有激起你熊熊的靈感呢~
明天就來用 box-shadow 畫圖吧!
明天見囉~



/images/emoticon/emoticon43.gif

參考資料

W3C-Miscellaneous Effects
W3C-Painting order
MDN-box-shadow


上一篇
番外篇 - 胡搞 box-shadow(上)
下一篇
番外篇 - 胡搞 box-shadow (下)
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言