div產生陰影
<div>是HTML中最常用的容器標簽之一，它可以用來創建結構和布局網頁的各個部分。然而，在設計和美化網頁時，我們經常需要為<div>元素添加一些視覺效果，如陰影。陰影能夠賦予一個元素更加立體感和層次感，提升用戶對網頁的視覺體驗。接下來，我們將通過幾個代碼案例詳細解釋如何使用CSS來實現<div>元素的陰影效果。
案例一：基本陰影 要為<div>元素添加陰影，我們可以使用CSS中的box-shadow屬性。該屬性可以接受多個參數指定陰影的位置、大小、顏色等。下面是一個基本的<div>元素陰影的樣式設置：

p {
text-align: center;
}
<br>
.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
<br>
<div class="box">
<p>這是一個帶陰影的DIV</p>
</div>

在上面的代碼中，我們通過.box類選擇器為<div>元素設定了寬度、高度和背景顏色。然后，通過box-shadow屬性為<div>元素添加了一個10像素大小、黑色的陰影。可以根據需要調整陰影大小、位置和顏色，以滿足設計要求。
案例二：內部陰影 有時，我們還需要為<div>元素添加內部陰影，以突出元素的內部內容。我們可以通過CSS中的inset關鍵字來實現內部陰影效果。下面是一個<div>元素內部陰影的示例代碼：

.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}
<br>
<div class="box">
<p>這是一個帶內部陰影的DIV</p>
</div>

在上述代碼中，我們通過將box-shadow屬性的inset關鍵字設置為內部陰影效果。可以看到，陰影現在出現在<div>元素的內部，為其內容添加了一些深度和層次感。
案例三：多重陰影 有時候，我們還可以為<div>元素添加多重陰影，以創造出更加復雜和獨特的效果。我們只需要通過逗號分隔不同的box-shadow屬性來實現多重陰影效果。下面是一個示例代碼：

.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5),
0px 0px 5px rgba(0, 0, 0, 0.3),
0px 0px 2px rgba(0, 0, 0, 0.1);
}
<br>
<div class="box">
<p>這是一個帶多重陰影的DIV</p>
</div>

在上述代碼中，我們為<div>元素定義了三個不同大小和顏色的陰影。這種多重陰影效果可以為元素增加更多紋理和視覺層次。
： 通過使用CSS的box-shadow屬性，我們可以輕松地為<div>元素添加陰影效果。從基本陰影到內部陰影，再到多重陰影，我們可以根據需要為元素創造出不同的美麗和獨特效果。這些陰影效果能夠提升用戶對網頁的視覺感受，增加網頁設計的吸引力。在進行網頁美化時，我們可以根據設計需求選擇合適的陰影樣式，充分發揮<div>元素的裝飾和美化作用。