<div>是網頁布局中最常用的元素之一，它可以用來劃分頁面的不同部分。除了在布局中起到分割頁面的作用之外，<div>元素還可以用來創建陰影效果。CSS的box-shadow屬性可以實現這個功能。本文將詳細介紹如何使用CSS的box-shadow屬性來為<div>元素添加陰影效果，并給出幾個示例。
CSS的box-shadow屬性用于為元素添加陰影效果。其語法如下：

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

其中，h-shadow表示水平方向的陰影偏移量，可以為正值（向右偏移）或負值（向左偏移）；v-shadow表示垂直方向的陰影偏移量，可以為正值（向下偏移）或負值（向上偏移）；blur表示陰影的模糊半徑，可以為0或正值，值越大越模糊；spread表示陰影的擴展半徑，可以為0或正值，值越大陰影越擴展；color表示陰影的顏色，可以使用顏色名稱、十六進制值或RGB值來表示；inset表示陰影內嵌，可選參數。
下面是一個簡單的示例，演示如何為一個<div>元素添加陰影效果：

<div style="width: 200px; height: 200px; box-shadow: 5px 5px 10px #000000;"></div>

上述代碼中，<div>元素的寬度和高度分別設置為200px，box-shadow屬性設置為"5px 5px 10px #000000"，表示陰影在水平方向向右偏移5px，在垂直方向向下偏移5px，模糊半徑為10px，顏色為黑色。運行代碼后，<div>元素將帶有一層黑色的陰影。
除了可以使用固定的陰影效果，CSS的box-shadow屬性還可以通過動態計算來實現懸浮陰影效果。下面是一個示例，演示如何為一個<div>元素設置懸浮陰影效果：

<div style="width: 200px; height: 200px;" onmouseover="this.style.boxShadow='1px 1px 10px #000000';" onmouseout="this.style.boxShadow='none';"></div>

上述代碼中，<div>元素沒有設置固定的box-shadow屬性，而是通過onmouseover和onmouseout事件來動態設置陰影效果。當鼠標懸浮在<div>元素上時，通過this.style.boxShadow屬性將陰影設置為"1px 1px 10px #000000"，即水平方向向右偏移1px，垂直方向向下偏移1px，模糊半徑為10px，顏色為黑色；當鼠標移出<div>元素時，通過this.style.boxShadow屬性將陰影設置為"none"，即移除陰影效果。運行代碼后，<div>元素將在懸浮狀態下帶有陰影效果。
除了為<div>元素添加簡單的陰影效果，CSS的box-shadow屬性還可以實現復雜的陰影效果，如多層陰影和內陰影。下面是一個示例，演示如何為一個<div>元素設置多層陰影效果和內陰影效果：

<div style="width: 200px; height: 200px; box-shadow: 5px 5px 10px #000000, -5px -5px 10px #ffffff inset;"></div>

上述代碼中，<div>元素的box-shadow屬性設置為"5px 5px 10px #000000, -5px -5px 10px #ffffff inset"，表示同時設置了兩層陰影效果。第一層陰影在水平方向向右偏移5px，在垂直方向向下偏移5px，模糊半徑為10px，顏色為黑色；第二層陰影在水平方向向左偏移5px，在垂直方向向上偏移5px，模糊半徑為10px，顏色為白色，且為內陰影。運行代碼后，<div>元素將帶有兩層陰影效果，并且第二層陰影為內陰影。
通過CSS的box-shadow屬性，我們可以為<div>元素添加各種各樣的陰影效果，包括固定陰影、懸浮陰影、多層陰影和內陰影等。使用這些陰影效果可以提升網頁的視覺效果，使布局更加立體和有層次感。在實際開發中，我們可以根據需求進行調整和定制，創造出獨特的網頁效果。