<div>外陰影是一種常用于網頁設計中的效果，可以通過為<div>元素添加陰影效果，使其在頁面中突出顯示。這種效果為網站添加了一種層次感和立體感，使界面看起來更加精致和美觀。在本文中，我們將通過幾個代碼案例來詳細解釋和演示如何使用<div>外陰影效果。

案例一：簡單外陰影

<div class="shadow">
<p>Hello, World!</p>
</div>
<br>
<style>
.shadow {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>

在這個案例中，我們創建了一個包含了文本 "Hello, World!" 的<div>元素，并給它添加了一個類名為 "shadow" 的CSS樣式。在該樣式中，我們使用了box-shadow屬性來定義了一個外陰影效果。該屬性由四個值組成，分別表示陰影的水平偏移量、垂直偏移量、模糊半徑和顏色。我們使用rgba()函數來定義顏色，并在最后一個參數中設置了透明度。

案例二：多重外陰影

<div class="double-shadow">
<p>Hello, World!</p>
</div>
<br>
<style>
.double-shadow {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>

在這個案例中，我們使用逗號分隔來定義了兩個外陰影效果，分別具有不同的偏移量和透明度。這樣可以為<div>元素添加更加復雜和立體的陰影效果。

案例三：內外陰影組合

<div class="inset-shadow">
<p>Hello, World!</p>
</div>
<br>
<style>
.inset-shadow {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>

在這個案例中，我們使用inset關鍵字為<div>元素添加了一個內陰影效果，并且使用逗號分隔為其添加了一個外陰影效果。這樣可以為元素創建出一種具有質感的效果，使其在頁面中更加突出。

通過以上幾個案例，我們可以看到<div>外陰影的靈活性和易用性。通過簡單的CSS樣式定義，我們就可以為元素添加不同顏色、偏移和透明度的陰影效果。這種效果不僅可以為網頁增添美觀，還可以為用戶提供更好的交互體驗。希望本文對于理解和使用<div>外陰影效果有所幫助。