div是HTML中最常用的元素之一，用于將文檔劃分為不同的區域或容器。在網頁設計中，為了增加網頁的美感和立體感，我們經常會為div添加陰影效果。通過為div添加陰影，可以使網頁元素更加突出，給用戶更好的視覺體驗。下面將通過幾個代碼案例詳細解釋如何為div添加陰影效果。
第一個案例是給div添加內陰影效果。內陰影是指陰影效果出現在div的內部，給元素增加一種凹陷的感覺。實現內陰影效果可以使用CSS3的box-shadow屬性。下面是一個例子：

，設置一個div元素：

<div class="box">這是一個內陰影的div</div>

然后，在CSS樣式中為該div添加內陰影效果：

.box {
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

以上代碼中，通過設置box-shadow屬性的inset關鍵字為內陰影效果，同時指定了陰影的水平偏移量、垂直偏移量和模糊半徑，以及陰影的顏色。這樣就給div添加了一個內陰影效果。你可以根據需要調整陰影的參數值，來達到想要的效果。

第二個案例是給div添加外陰影效果。外陰影是指陰影效果出現在div的邊框外部，給元素增加一種浮起的感覺。要實現外陰影效果同樣可以使用CSS3的box-shadow屬性。下面是一個例子：

，設置一個div元素：

<div class="box">這是一個外陰影的div</div>

然后，在CSS樣式中為該div添加外陰影效果：

.box {
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

以上代碼中，通過設置box-shadow屬性的水平偏移量、垂直偏移量和模糊半徑，以及陰影的顏色，來給div添加了一個外陰影效果。同樣，你也可以根據需要調整陰影的參數值。

第三個案例是給div添加多個陰影層。通過在box-shadow屬性中添加多個陰影層，可以為div創建更為復雜的陰影效果。下面是一個例子：

，設置一個div元素：

<div class="box">這是一個復雜陰影效果的div</div>

然后，在CSS樣式中為該div添加多個陰影層：

.box {
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 0, 0, 0.2);
}

以上代碼中，通過在box-shadow屬性中依次添加多個陰影層，每個陰影層都有不同的的水平偏移量、垂直偏移量、模糊半徑和顏色。這樣就給div添加了一個復雜的陰影效果。

通過以上案例，我們可以看到通過CSS3的box-shadow屬性，我們可以輕松為div添加陰影效果，從而增加網頁的美觀和立體感。無論是內陰影還是外陰影，還是多個陰影層的組合，我們都可以根據需要進行調整，以滿足設計要求。希望以上內容對你理解和運用div下陰影有所幫助。