有了陰影畫面瞬間變得更有立體感

##為什麼要有這功能
box-shadow 是一個能為元素添加陰影的 CSS 屬性，用來增強網頁設計的深度和立體感，讓元素從頁面中“浮現”出來，強調其存在感。這項功能常用於卡片、按鈕、彈出框等設計，通過陰影營造層次感與視覺焦點，使介面更具美觀與現代感。

##核心結構
box-shadow：主要屬性，用來設置元素的陰影效果，控制陰影的水平方向偏移、垂直方向偏移、模糊半徑、擴展半徑和陰影顏色。
格式：box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;
horizontal-offset：陰影的水平方向偏移量。
vertical-offset：陰影的垂直方向偏移量。
blur-radius：陰影的模糊程度，值越大陰影越模糊。
spread-radius：陰影的擴展大小，值越大陰影越擴展。
color：陰影的顏色。

##主要功能
增強立體感：添加陰影效果，讓元素看起來更具立體感，提升頁面層次。
創造焦點：通過陰影引導用戶視覺注意，適合用於重要元素如按鈕或彈出框。
視覺深度：增加陰影可以使頁面中的元素看起來像是浮動在背景上，產生視覺上的深度。

##注意事項
陰影過度會讓設計變得笨重，保持適當的陰影使用，避免過度使用造成視覺負擔。
當陰影顏色過深或過於擴展，會影響整體設計的協調性。
不同瀏覽器對陰影渲染可能有些微差異，需進行跨瀏覽器測試。

##簡單範例應用