<div> 底部投影是一種常見的網頁設計效果，它可以給元素添加一個底部的投影效果，使頁面看起來更加立體和有層次感。通過使用CSS屬性和一些簡單的代碼，我們可以輕松實現這個效果。
下面是幾個代碼案例，用于詳細解釋和說明如何實現<div>底部投影效果。
第一個案例是通過使用box-shadow屬性來添加底部投影效果。在需要添加效果的<div>標簽上使用以下CSS代碼：

div {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

這個代碼將在<div>元素的底部添加一個10像素寬度的灰色投影。你也可以通過調整這個屬性的值來改變投影的寬度、顏色和透明度。
第二個案例是使用偽元素來實現底部投影效果。在需要添加效果的<div>標簽上使用以下CSS代碼：

div {
position: relative;
}
<br>
div::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
}

這個代碼使用了偽元素::after來創建一個位于<div>底部的矩形框，并為它添加了背景顏色和透明度。通過調整height屬性的值可以改變投影的高度。
第三個案例是使用線性漸變來實現底部投影效果。在需要添加效果的<div>標簽上使用以下CSS代碼：

div {
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}

這個代碼通過將背景設置為一個從底部到頂部的線性漸變，使底部透明度逐漸減少，從而實現了底部投影效果。
以上是幾個常用的實現<div>底部投影效果的代碼案例。你可以根據自己的需求和網頁設計風格選擇適合的方法來添加底部投影效果。記得在實際應用中，根據具體情況進行適當的調整和優化，以達到更好的視覺效果。