div添加陰影是網頁設計中常用的一個效果，可以讓元素在視覺上更加立體感和層次感。通過給div元素添加陰影，可以使頁面元素與背景有明顯的對比，從而使頁面更加精美和有吸引力。

下面將使用幾個代碼案例來說明如何實現div添加陰影的效果。

案例一：

我們可以使用CSS的box-shadow屬性來給div添加陰影。box-shadow屬性接受四個參數，分別是水平偏移量、垂直偏移量、模糊半徑和顏色。下面的代碼示例展示了給一個id為box的div添加陰影的實現：

<style>
#box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
<br>
<div id="box"></div>

上面的代碼中，我們定義了一個id為box的div，設置了寬度、高度和背景顏色。通過box-shadow屬性，我們給div添加了一個2px水平和垂直偏移量，5px的模糊半徑，以及顏色為rgba(0, 0, 0, 0.3)的陰影效果。這個陰影效果可以讓box元素與背景有明顯的分隔。

案例二：

如果我們想給一個div元素的上、右、下和左四個邊框分別添加不同顏色和寬度的陰影效果，我們可以使用CSS的box-shadow屬性的多值寫法。下面的代碼示例展示了如何給一個class為card的div添加四個邊框的陰影效果：

<style>
.card {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: 
2px 0px 5px rgba(0, 0, 0, 0.3),
0px 2px 5px rgba(0, 0, 0, 0.3),
-2px 0px 5px rgba(0, 0, 0, 0.3),
0px -2px 5px rgba(0, 0, 0, 0.3);
}
</style>
<br>
<div class="card"></div>

上面的代碼中，我們定義了一個class為card的div，設置了寬度、高度和背景顏色。通過使用多個box-shadow屬性值，我們分別給div的上、右、下和左四個邊框添加了不同顏色和寬度的陰影效果。這種方法可以讓元素的邊框看起來更加突出和立體。

案例三：

除了使用CSS的box-shadow屬性之外，我們還可以使用其他方法來給div添加陰影效果。下面的代碼示例展示了使用CSS的before偽元素來實現給一個class為shadow的div添加陰影的效果：

<style>
.shadow {
width: 200px;
height: 200px;
background-color: #f1f1f1;
position: relative;
}
<br>
.shadow:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
z-index: -1;
}
</style>
<br>
<div class="shadow"></div>

上面的代碼中，我們定義了一個class為shadow的div，設置了寬度、高度和背景顏色。通過使用CSS的before偽元素，在div元素的前面創建了一個與div大小一致的偽元素，并給偽元素添加了陰影效果。通過設置z-index為-1，我們將偽元素放置在div的背后，從而實現了給div添加陰影的效果。

通過上面的幾個代碼案例，我們可以了解到如何使用CSS來給div添加陰影效果。這些方法可以根據實際需求靈活使用，以實現不同的陰影效果，使網頁設計更加豐富多樣。