div 圓角陰影是一種常見的網頁設計技術，它通過在一個元素的外邊框上應用圓角和陰影效果，為網頁增添了美觀和現代感。本文將通過幾個代碼案例詳細解釋說明 div 圓角陰影的實現方法和效果。
第一個案例是一個簡單的圓角陰影 div。通過 CSS 的 border-radius 屬性可以制作出圓角邊框，而 box-shadow 屬性可以添加陰影效果。下面的代碼示例展示了如何創建一個具有圓角和陰影效果的 div：

<div style="width: 200px; height: 200px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
這是一個帶有圓角和陰影效果的 div。
</div>

在這個代碼示例中，div 的寬度和高度分別被設置為 200px，通過 border-radius: 10px; 來設置 div 的邊框為圓角，并通過 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 來添加一個半透明的黑色陰影效果。
第二個案例是一個多重圓角陰影 div。除了簡單的圓角和陰影效果外，div 還可以通過使用不同的顏色和陰影偏移量來創建多重圓角和陰影效果。下面的代碼示例展示了如何創建一個具有多重圓角和陰影效果的 div：

<div style="width: 200px; height: 200px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 5px 5px 10px rgba(0, 0, 0, 0.3);">
這是一個帶有多重圓角和陰影效果的 div。
</div>

在這個代碼示例中，除了之前的圓角和陰影效果外，通過 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 添加了一個偏移量為 (5px, 5px)、顏色為半透明的黑色的陰影。這樣就實現了多重圓角和陰影效果。
第三個案例是一個漸變圓角陰影 div。除了使用純色來創建圓角和陰影效果外，div 還可以使用 CSS 漸變來實現這些效果。下面的代碼示例展示了如何創建一個具有漸變圓角和陰影效果的 div：

<div style="width: 200px; height: 200px; border-radius: 10px; background: linear-gradient(45deg, #ff9a9e, #fad0c4); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
這是一個帶有漸變圓角和陰影效果的 div。
</div>

在這個代碼示例中，通過 background: linear-gradient(45deg, #ff9a9e, #fad0c4); 使用了一個 45 度的線性漸變來作為 div 的背景色。其他圓角和陰影效果的創建方法與之前案例相同。
綜上所述，div 圓角陰影是一種常見的網頁設計技術，通過在 div 元素的外邊框上應用圓角和陰影效果，可以為網頁增添美觀和現代感。通過使用 CSS 的 border-radius 和 box-shadow 屬性，可以輕松實現各種圓角和陰影效果的 div。根據需要，可以創建簡單的圓角陰影、多重圓角陰影以及漸變圓角陰影。這些技術將幫助網頁設計師和開發者創建出更加吸引人的網頁界面。