iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
3
自我挑戰組

前端新手進化史系列 第 9

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

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


box-shadow 通常像是個可有可無的角色,但其實他也可以變出好玩的花樣,在展現影分身之術前,還是先來打個基本功,熟悉一下 box-shadow 的特性吧!

box-shadow 特性

  • 不會影響佈局,僅會與元素或其他陰影產生重疊

  • 不會觸發或影響視窗滾動條。

  • 依據元素的 border 形狀繪製,若元素設有 border-radius,陰影也將繪製出相同形狀,但border-image 屬性影響。

  • 以圖層來看,陰影在元素背景(background)層 ; 陰影在元素背景(background)層,但在邊框(border)與內容(content)下層。

圖片來源:W3C

  • 一個元素使用多層陰影時,在語法上排序在愈前面的陰影其 z-index越大,依次遞減,故排序在後的陰影視覺上會被遮蓋住。



box-shadow 語法:

box-shadow : offset-x | offset-y | blur-radius | spread-distance | color | inset

在解釋每個值的意義之前,須注意的是,別把 X、Y軸與數學上所習慣的座標軸搞混囉!

如下圖:

offset-x

陰影在水平方向(X軸)的偏移量

  • 值 ⇒ 陰影向偏移
  • 值 ⇒ 陰影向偏移

offset-y

陰影在垂直方向(Y軸)的偏移量

  • 值 ⇒ 陰影向偏移
  • 值 ⇒ 陰影向偏移

blur-radius

模糊效果的範圍。

  • 此值越大,模糊越大,陰影也會有變大的效果
  • 不允許使用值,如果未指定則為 0

spread-radius

調整陰影大小

  • 值 ⇒ 使陰影放大,若同時有 blur-radius 值,則陰影會先延伸再模糊
  • 值 ⇒ 使陰影縮小
  • 未指定則為 0

color

顏色。

  • 指定,則取決於瀏覽器

inset

內陰影。

  • 加在 box-shadow 語法的最前面最後面
  • 指定,則為外陰影

多層陰影

逗號隔開,亦可同時設定多層外陰影與內陰影。



瞭解完 box-shadow 的語法與特性後,下一篇就來看看 box-shadow 還能夠玩出什麼花樣吧!




/images/emoticon/emoticon35.gif


參考資料

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


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

尚未有邦友留言

立即登入留言