<div>標簽是HTML中的一個重要元素，用于在網頁中創建獨立的區塊。而通過使用CSS，我們可以對<div>標簽添加樣式來實現各種效果，其中包括為<div>添加陰影效果。CSS的陰影屬性可以為<div>元素增加立體感和層次感，使其在網頁中更加突出和引人注目。
下面我們來看一些代碼案例，詳細解釋如何使用CSS實現<div>陰影效果。
代碼案例一：

html
<style>
div {
width: 200px;
height: 200px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
<br>
<div>
<p>這是一個帶陰影效果的<div>元素。</p>
</div>

在這個案例中，我們通過CSS的box-shadow屬性為<div>元素添加了陰影效果。box-shadow屬性的語法是h-shadow v-shadow blur color，其中h-shadow表示水平偏移量，v-shadow表示垂直偏移量，blur表示模糊程度，color表示陰影顏色。上述代碼中，h-shadow和v-shadow都設置為2像素，blur設置為5像素，陰影顏色使用rgba值為黑色，并設置了透明度為0.5。通過調整這些數值，我們可以實現不同樣式的陰影效果。
代碼案例二：

html
<style>
div {
width: 200px;
height: 200px;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
<br>
<div>
<p>這是一個帶陰影效果的<div>元素。</p>
</div>

在這個案例中，我們的陰影效果稍有不同。通過將h-shadow的值設置為負數，實現了陰影向左側偏移的效果。這種方式可以用于創建各種不同方向的陰影效果。
代碼案例三：

html
<style>
div {
width: 200px;
height: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
</style>
<br>
<div>
<p>這是一個帶陰影效果的<div>元素。</p>
</div>

在這個案例中，我們使用了多個陰影效果來創建層次感。box-shadow屬性可以接受多個參數，通過逗號分隔不同的陰影效果。我們對<div>元素應用了兩個陰影效果，一個是模糊程度為10像素的黑色陰影，另一個是模糊程度為20像素的透明黑色陰影。通過調整這些參數，我們可以創造出不同的層次感效果。
通過這幾個代碼案例，我們看到了如何使用CSS為<div>元素添加陰影效果。通過調整陰影的參數，我們可以創造出各種不同樣式的陰影效果，從而使網頁內容更加生動和吸引人的同時，也提供了更好的用戶體驗。希望這篇文章對你了解和使用CSS的陰影效果有所幫助！