在Web開發中，通過使用CSS樣式表，我們可以為HTML元素添加各種樣式和效果，其中之一就是為<div>元素創建陰影效果。通過CSS的box-shadow屬性，我們可以輕松地為<div>元素添加陰影效果，以增加網頁的視覺吸引力。

下面是幾個簡單的代碼案例，用于演示如何使用CSS為<div>元素添加陰影效果。

案例一：

<div class="shadow-effect">
<p>This is a div element with shadow effect.</p>
</div>
<style>
.shadow-effect {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

在這個案例中，我們給<div>元素添加了一個名為"shadow-effect"的類，并為該類定義了一些樣式。我們設置了<div>元素的寬度和高度，背景顏色為#f0f0f0（淺灰色），并使用box-shadow屬性為<div>元素添加了一個陰影效果。box-shadow的參數分別代表了陰影的水平偏移量、垂直偏移量、模糊半徑和陰影顏色。在這個案例中，陰影的水平和垂直偏移量為0，模糊半徑為10px，陰影顏色為rgba(0, 0, 0, 0.5)（半透明黑色）。

案例二：

<div class="shadow-effect">
<div class="content">
<p>This is a div element with shadow effect.</p>
</div>
</div>
<style>
.shadow-effect {
width: 200px;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
}
<br>
  .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

在這個案例中，我們為<div>元素添加了一個名為"shadow-effect"的類，并設置了寬度、高度、背景顏色以及其他樣式。此外，我們為<div>元素的內容容器添加了一個名為"content"的類，并設置了絕對定位，使其相對于父元素居中顯示。最后，我們使用box-shadow屬性為內容容器添加了一個陰影效果。

案例三：

<div class="shadow-effect">
<div class="content">
<p>This is a div element with multiple shadow effects.</p>
</div>
</div>
<style>
.shadow-effect {
width: 200px;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
}
<br>
  .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5),
0px 0px 20px rgba(0, 0, 0, 0.3),
0px 0px 30px rgba(0, 0, 0, 0.1);
}
</style>

在這個案例中，我們與上一個案例的代碼相似，只是這次我們為內容容器添加了多個陰影效果。通過在box-shadow屬性中分別指定不同的陰影參數，我們可以為<div>元素創建出多層陰影效果，從而增加了一些視覺層次感。

通過這幾個簡單的案例，我們可以看到使用CSS的box-shadow屬性可以為<div>元素添加各種陰影效果，從而使整個網頁更加生動和吸引人。根據實際需求，可以靈活調整陰影的位置、大小、模糊程度和顏色等參數，以達到最佳的視覺效果。