CSS box-shadow 屬性詳解：讓元素擁有立體感的陰影效果
更新日期： 2024 年 11 月 4 日
在網頁設計中，陰影效果可以增添元素的深度和層次感，使頁面更加生動和有趣。
CSS 中的 box-shadow 屬性提供了一種簡單而強大的方式，可以為任意區塊元素添加陰影效果。
透過精確控制陰影的大小、模糊程度、偏移和顏色，我們可以實現從細緻微妙的陰影到鮮明的立體效果。
本文將詳解 box-shadow 屬性的用法，並提供一些範例來展示它的靈活性。
box-shadow 基本語法
box-shadow 屬性允許我們定義一個或多個陰影。基本語法如下：
box-shadow: offset-x offset-y blur-radius spread-radius color;offset-x：陰影的水平位移。正值使陰影向右偏移，負值向左偏移。offset-y：陰影的垂直位移。正值使陰影向下偏移，負值向上偏移。blur-radius（模糊半徑）：控制陰影的模糊程度。值越大，陰影越模糊，默認為0（無模糊）。spread-radius（擴展半徑）：控制陰影的擴展程度。正值擴大陰影，負值縮小陰影，默認為0。color：陰影的顏色。可以使用顏色名稱、十六進位顏色值（如#000）、RGBA 顏色等。
例如，以下代碼創建了一個輕微模糊、向右下方偏移的黑色陰影：
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);box-shadow 屬性參數詳解
1. offset-x 和 offset-y：陰影位置
offset-x 和 offset-y 控制陰影在水平方向和垂直方向上的位置。正值會將陰影向右或向下移動，而負值則向左或向上移動。
box-shadow: 10px 10px 0px 0px black;此例中，陰影向右偏移 10px，向下偏移 10px，效果明顯且沒有模糊和擴展。
blur-radius：模糊半徑
blur-radius 控制陰影的模糊程度，數值越大，陰影越模糊。當設為 0 時，陰影邊緣會非常銳利。
box-shadow: 5px 5px 15px 0px black;這裡，模糊半徑為 15px，陰影邊緣顯得柔和，提供了更自然的陰影效果。
spread-radius：擴展半徑
spread-radius 用於控制陰影的擴展範圍，正值使陰影擴大，負值則縮小陰影範圍。
這個屬性在強調陰影的深度或範圍時非常有用。
box-shadow: 5px 5px 15px 5px black;在此例中，擴展半徑設為 5px，陰影比原始範圍更大，顯得更加立體。
color：陰影顏色
陰影的顏色可以根據設計需求進行調整。
常見的做法是使用半透明的黑色陰影，如 rgba(0, 0, 0, 0.2)，這樣陰影效果不會太過明顯且更具柔和性。
box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.2);多重陰影
box-shadow 屬性支持多重陰影，可以創造出更多豐富的效果。多重陰影可以通過逗號分隔，並依次設置不同的陰影屬性。這在創建「浮雕」或「發光」效果時非常有用。
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.5);此範例中，陰影有兩層：一層為黑色陰影，另一層為白色陰影，營造出立體效果。
box-shadow 的應用
- 按鈕效果：陰影可讓按鈕看起來更有立體感，使用輕微的陰影效果能夠提升可點擊性。
- 卡片式設計：
box-shadow可以用來製作卡片式設計，讓卡片在頁面中「浮起」，提升可視性。 - 輸入框焦點效果：在輸入框聚焦時添加陰影效果，能夠增強用戶體驗，提示使用者當前操作區域。
- 浮雕效果：透過內陰影
inset可以製作凹陷效果，適合模擬浮雕或立體按鈕的視覺效果。
結論
CSS box-shadow 屬性是一個強大且靈活的工具，能夠輕鬆創建陰影效果，為網頁設計帶來更豐富的層次感。
無論是製作簡單的浮起效果，還是更具創意的多重陰影設計，box-shadow 都能滿足不同的需求。
熟練掌握 box-shadow，可以讓您的網頁設計更加生動、立體，提升整體的視覺效果。