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

誰說影子一定要是黑色的呢？
誰說影子永遠當不了主角呢？
放下先入為主的偏見～

來看看幾個 box-shadow 幹的好事吧～
(以下純屬好玩～不要太認真～～)

1. 日曆

用一個 <div> 加上一個偽元素與 box-shadow 畫一個日曆！

codepen 程式碼

2. 調色盤

猜猜這個調色盤哪裡使用了 box-shadow

哈哈～只有矩形的大方框是個貨真價實的 <div>～

調色盤中的矩形大方框是整個畫面唯一的 div，上方黑色長條是 shadow，「select a color」是偽元素(::before)的內容，左上方第一個紅色圓點也是偽元素(::after)，其餘 19 個圓點皆是紅色圓點的 shadow。

codepen 範例連結

3. 魔術方塊

再來，猜猜這個魔術方塊哪裡使用了 box-shadow～

哈哈～依然只有一個 \<div>～

紅色小方框是個貨真價實的 div，與其相鄰的藍色(上方)和黃色(右方)方框是偽元素，其餘方框皆是這三個方框的 shadow。

codepen範例連結

4. 製造點擊按鈕的互動效果

box-shadow 除了讓鍵帽看起來更立體之外，也可以搭配 :active 做出點擊時的互動效果！

設定點擊(:active)時，讓原本的陰影(box-shadow)範圍縮小，同時讓鍵帽整體微微向下移，就可以達到真的在按壓的效果囉！

codepen 範例連結

5. 製造月亮移動的效果

這個 idea 是在吳哲宇老師的線上課程中學到的～非常有趣!！

下圖中，左上角月亮的移動效果就是利用 box-shadow 的動畫做出來的。

多數人第一眼的直覺會認為黃色部分是元素本身，因為 shadow 通常給人感覺就是黑黑暗暗的，但其實黃色部分才是 shadow！！(元素本身的預設背景顏色(background-color)是透明的)

技巧： shadow 會如影隨形地跟著元素本身，所以元素往右上方移動時，影子也會被拉著往右上方移動，但要讓元素移動時，影子不動！

⇒ shadow 自己反方向往右下方移動
⇒ 往右上的力量與往右下的力量會相互抵消，所以 shadow 最後停留在原地，只有元素在動。

box-shadow 若再加上迴圈可以玩出更多酷炫的效果，不過......Just for fun~
過度使用影分身之術做動畫是很消耗查克拉(效能)的唷～

box-shadow 的介紹就到這邊！如果之後有發現其它有趣的點子會再更新~
也歡迎大家與我分享有趣的 ideas！
明天見囉！

參考資源

動畫互動網頁特效入門（JS/CANVAS）
動畫互動網頁程式入門 (HTML/CSS/JS)