<div>是HTML中最常用的標簽之一，用于定義HTML文檔中的一個區域或容器，可以將其用來組織和布局網頁內容。在網頁設計中，我們有時候需要給<div>元素添加一些陰影效果，以突出顯示其邊界和內容。在本文中，我們將詳細解釋如何使用CSS來給<div>元素添加陰影效果，并提供幾個實例來幫助讀者更好地理解。

第一個案例將展示如何使用CSS的box-shadow屬性來給<div>元素添加一個簡單的陰影效果。box-shadow屬性可以接受多個參數，包括陰影的水平偏移量、垂直偏移量、模糊半徑、陰影顏色等。下面是一個示例的CSS代碼：

div {
box-shadow: 2px 2px 5px #888888;
}

在上述代碼中，我們給<div>元素添加了一個寬度和高度為100px的區域，并通過box-shadow屬性給它添加了一個2像素的水平偏移量、2像素的垂直偏移量和5像素的模糊半徑的陰影效果。陰影的顏色為#888888，也可以使用其他顏色值來指定。您可以根據實際需要調整這些值來獲得不同的陰影效果。

接下來我們將介紹一個稍微復雜一些的案例，通過使用CSS的box-shadow屬性以及border-radius屬性來給<div>元素創建一個帶有圓角和陰影效果的容器。

div {
width: 200px;
height: 200px;
border-radius: 10px;
background-color: #f5f5f5;
box-shadow: 0px 0px 10px #888888;
}

在上述代碼中，我們給<div>元素設置了一個200像素的寬度和高度，并使用border-radius屬性將其邊角設置為10像素的圓角。通過設置背景顏色為#f5f5f5，我們給容器添加了一個淺灰色的背景。然后，我們使用box-shadow屬性為元素添加了一個水平和垂直偏移量都為0的陰影，模糊半徑為10像素。這樣，我們就創建了一個帶有圓角和陰影效果的容器。

最后，我們將引用一篇其他文章中的真實案例來更加詳細地解釋如何使用CSS給<div>元素添加陰影效果。在這篇文章中，作者通過使用偽元素:before和:after以及box-shadow屬性來創建一個漂亮的折角效果。

div {
width: 300px;
height: 200px;
background-color: #ffffff;
position: relative;
}
<br>
div:before,
div:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border: 20px solid transparent;
}
<br>
div:before {
border-bottom-color: #000000;
border-left-color: #000000;
}
<br>
div:after {
border-top-color: #cccccc;
border-right-color: #cccccc;
z-index: 1;
}
<br>
div:before,
div:after {
box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.3);
}

在上述代碼中，我們給<div>元素設置了一個背景顏色為白色，并通過position屬性將其定位為相對定位。然后，我們使用:before和:after偽元素分別創建了上部折角和下部折角的效果。通過調整border屬性的寬度和顏色，我們設置了相應的邊界顏色。而通過設置box-shadow屬性，我們為折角添加了一個陰影效果。通過這種方式，我們可以創建出具有立體感的陰影效果，為<div>元素增加了一些視覺吸引力。

而言，通過使用CSS的box-shadow屬性，我們可以很方便地給<div>元素添加各種各樣的陰影效果，以增強其視覺效果。通過靈活調整box-shadow屬性的參數，我們可以創建出不同形狀和顏色的陰影效果，以滿足不同的設計需求。