box-shadow屬性是CSS中的一項功能，用於在元素周圍添加陰影。 這種陰影可以根據您的需求具有不同的形狀、顏色和模糊程度，從而為元素帶來立體感和深度。 的語法如下：

box-shadow: 横向偏移 縱向偏移 模糊半俓 擴展半徑 陰影顏色;

• 橫向偏移：表示陰影相對於元素的水準位置，可以為負值向左移動陰影，正值向右移動陰影。

• 縱向偏移：表示陰影相對於元素的垂直位置，可以為負值向上移動陰影，正值向下移動陰影。

• 模糊半徑：表示陰影的模糊程度，值越大越模糊，可以是零。

• 擴展半徑：可選項，表示陰影的擴展或收縮程度，可以是正值或負值。 省略時預設為0。

• 陰影顏色：表示陰影的顏色，可以使用顏色值、RGB、RGBA、HSL、HSLA等格式。

範例

範例 1：基本的黑色陰影

box-shadow: 0 0 5px black;

這個範例將一個基本的黑色陰影應用於元素，無橫向和縱向偏移，模糊半徑為5px。 結果是一個簡單的黑色陰影效果。

範例 2 : 紅色陰影，向右下方偏移

box-shadow: 5px 5px 10px red;

這個範例創建了一個紅色陰影，橫向和縱向偏移均為5px，模糊半徑為10px。 這使得元素看起來有一種向右下方投射的效果。

範例 3 : 藍色陰影，模糊半徑為0，擴展半徑為10px

box-shadow: -5px -5px 0 10px blue;

在這個範例中，我們使用了負值的橫向和縱向偏移，將陰影向左上方偏移。 模糊半徑為0，這意味著陰影是銳利的。 此外，擴展半徑為10px，使陰影在元素周圍有一定的擴展。

範例 4 : 多重陰影效果

box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(0, 0, 0, 0.2);

這個範例演示了如何創建多重陰影效果。 我們使用逗號分隔了兩個值，分別應用了兩個陰影效果，一個向右下方，一個向左上方。

今天的介紹就到這裡，我們明天鐵人賽見吧。