<預備知識>在 CSS 中，有一個 box-shadow 屬性可用來為 HTML 元素添加陰影。 并且，通常 box-shadow 只添加元素的下邊緣陰影，默認情況下， box-shadow 并不會在 HTML 元素的其他邊緣添加陰影。<引言>在CSS3中， box-shadow 屬性有了更新，現在可以使用 box-shadow 屬性，為 HTML 元素添加陰影。使用 CSS3 box-shadow 屬性，我們可以同時為 HTML 元素的四個邊緣添加陰影。那么，下面我們來詳細介紹如何為 HTML 元素的四個邊緣添加陰影。

第一步，為元素設置 box-shadow 屬性。在設置 box-shadow 前，請先了解其語法。box-shadow 屬性的語法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，各個參數具體含義如下：

• h-shadow：水平陰影的位置，可正可負，不添加陰影填寫 0。
• v-shadow：垂直陰影的位置，可正可負，不添加陰影填寫 0。
• blur：陰影的模糊程度，可不填，默認值為 0。
• spread：陰影的擴散程度，可正可負，不填寫時默認為 0，代表陰影與 HTML 元素的邊緣重合。
• color：陰影的顏色，可以是顏色單詞，也可以是十六進制顏色值。
• inset：可選參數，只有當填寫為 inset 時才觸發內部陰影，省略時外部陰影。

第二步，在 box-shadow 屬性中依次填寫設置的陰影值。下面是一個例子：

.box {
box-shadow: 5px -5px 5px -5px blue inset;
}

上述代碼中，我們設置了一個長方形的 HTML 元素，并為其添加了一個藍色的內部陰影效果。我們為陰影配置了 5px 的水平偏移、-5px 的垂直偏移、 5px 的模糊程度、-5px 的擴散程度和藍色的顏色。

第三步，根據需要配置 HTML 元素四個邊緣的陰影。 需要注意的是添加四個邊緣陰影時，需要使用逗號（,）分隔。

.box {
box-shadow: 
5px -5px 5px -5px blue inset,   /* 上方陰影，偏移量：5px 左右，-5px 上下 */
-5px 5px 5px -5px green inset, /* 下方陰影，偏移量：-5px 左右，5px 上下 */
5px 5px 5px -5px red inset,    /* 右側陰影，偏移量：5px 左右，5px 上下 */
-5px -5px 5px -5px orange inset;   /* 左側陰影，偏移量：-5px 左右，-5px 上下 */
}

上述代碼中，我們為 HTML 元素的上、下、左、右四個邊緣都添加了不同的顏色的陰影。此時陰影效果如下圖所示：


結論：在 CSS3 中，可以使用 box-shadow 屬性來為 HTML 元素的四個邊緣添加陰影效果。需要注意的是，四個陰影之間，需要使用逗號 (,) 進行分隔。