CSS box-shadow 屬性介紹：新手必看指南
更新日期： 2024 年 10 月 31 日
在網頁設計中，陰影效果可以讓元素更加立體，增加視覺層次感。
CSS 的 box-shadow 屬性是一個強大的工具，可以用來為 HTML 元素添加陰影效果，讓頁面更加生動。
本文將帶你一步步了解 box-shadow 的基礎語法、各種參數以及常見用法。
什麼是 box-shadow？
box-shadow 是一個 CSS 屬性，可以為 HTML 元素創建陰影效果。
陰影不僅能夠讓元素浮現，更能提升整體設計感。
它的設置方式靈活，支持多種調整參數，讓你可以精確控制陰影的顏色、大小、模糊程度和位置。
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：陰影的顏色。可以使用各種 CSS 顏色表示法（例如
#000、rgba(0, 0, 0, 0.5)）。
box-shadow 的範例
下面是一些 box-shadow 的範例來幫助你了解每個參數的效果。
- 簡單陰影：僅指定偏移和顏色，適合初學者理解
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);這個設定會生成一個往右下角偏移的陰影，具有 10px 的模糊效果。
- 多層陰影：使用逗號分隔多層陰影，創造更有層次的效果
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), -3px -3px 5px rgba(255, 255, 255, 0.5);這樣可以在元素上同時添加黑色和白色陰影，使得元素更立體。
- 擴展陰影：加入
spread-radius，讓陰影更大
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);這個設定會創造一個擴展的陰影，看起來像是四周有光暈。
inset 內陰影
box-shadow 也支持 inset 關鍵字，讓陰影出現在元素內部，而非外部。這種效果常用於製作凹陷或浮雕效果。
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);這樣會讓陰影往內擴展，使元素看起來像是被壓進去。
常見的應用場景
- 按鈕陰影：增加按鈕的立體感
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);- 卡片式設計：為卡片添加微妙的陰影，提升整體設計感
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);- 焦點效果：創建浮動效果以引導用戶注意某個元素
box-shadow: 0px 0px 15px rgba(0, 120, 255, 0.7);結論
box-shadow 是一個非常靈活且簡單的 CSS 屬性，可以輕鬆創造出陰影效果，提升頁面元素的視覺層次。
透過不同參數的組合和應用，我們能夠實現許多視覺效果。
初學者可以先從簡單的陰影設定開始，逐漸嘗試更複雜的多層陰影與內陰影效果。
希望這篇文章能幫助你掌握 box-shadow 的基礎應用，讓你的網頁設計更具吸引力！