CSS 中的 box-shadow 屬性是開發人員向 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 （可選）： 此參數會影響陰影的尺寸。正值會增加陰影的大小，負值會減少陰影的大小。
• color：此屬性定義陰影的顏色。它可以是任何有效的 CSS 顏色表示形式，例如 #000、rgba(0,0,0,0.5) 或 hsl(0, 0%, 50%)。

範例：基本框陰影

讓我們來看一個應用於按鈕的框陰影的簡單範例：

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

在這種情況下，陰影在水平和垂直方向上偏移5px，模糊半徑為10px，並以0.3的黑色著色。不透明度。

範例：嵌入陰影

box-shadow 也支援 inset 關鍵字，它將陰影放置在元素內部，使其具有凹進效果。

div {
  box-shadow: inset 0 0 10px #000;
}

這裡，陰影被放置在div內部，產生內容被向內推入的效果。

進階提示

• 您可以透過用逗號描述每個 box-shadow 規範來建立多個陰影。該技術可以創建複雜的分層陰影效果。

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• 陰影效果經常用於產生懸停交互，增強按鈕或卡片的交互性。

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

對於喜歡更直觀的方法的人，請查看 Box-Shadow CSS 產生器。該工具可讓您輕鬆製作自訂盒子陰影效果，無需編寫任何程式碼並儲存預設。