在 Web 開發中，經常需要在頁面中創建具有特定效果的布局，其中一種常見的布局效果就是讓某個元素的內部部分呈現凹陷效果。這樣的效果可以為頁面增添立體感和美觀度。在 HTML 中，可以通過一些技術和 CSS 屬性來實現這一效果。

一種常用的實現方法是使用 CSS 的 box-shadow 屬性。這個屬性可以在元素的邊框外面創建一個投影效果，通過調整投影的偏移量和模糊程度，可以實現不同的凹陷效果。下面是一個示例代碼，展示了如何使用 box-shadow 屬性創建一個簡單的內部凹陷效果：

<style>
.inner-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
<br>
<div class="inner-div"></div>

在這個示例中，我們創建了一個寬高為 200px 的內部凹陷的 div，背景色為 #f0f0f0。通過設置 box-shadow 的 inset 值為"0 0 10px rgba(0, 0, 0, 0.5)"，我們實現了一個黑色的內部投影，投影的模糊程度為 10px。

除了使用 box-shadow 屬性，還可以使用 CSS3 的 border-radius 屬性來實現內部凹陷效果。border-radius 屬性可以為元素的邊框創建圓角效果，當設置較大的圓角半徑時，元素內部就會產生凹陷效果。下面是一個示例代碼，展示了如何使用 border-radius 屬性創建內部凹陷效果：

<style>
.inner-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border-radius: 50%;
}
</style>
<br>
<div class="inner-div"></div>

在這個示例中，我們創建了一個寬高為 200px 的內部凹陷的 div，背景色為 #f0f0f0。通過將 border-radius 的值設置為 50%，我們將 div 的四個角變為了圓角，從而實現了內部凹陷的效果。

除了以上兩種方法，還可以使用 CSS3 的偽元素 ::before 和 ::after 來創建內部凹陷效果。下面是一個示例代碼，展示了如何使用偽元素來實現內部凹陷效果：

<style>
.inner-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
position: relative;
}
.inner-div::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<br>
<div class="inner-div"></div>

在這個示例中，我們創建了一個寬高為 200px 的內部凹陷的 div，背景色為 #f0f0f0。通過使用 ::before 偽元素來創建一個有背景色的矩形，并設置其 position 為 absolute，相對于父元素進行定位，同時設置上、下、左、右的值為 10px，從而實現了內部凹陷的效果。

通過以上介紹的幾種方法，我們可以輕松地實現 Web 頁面中的內部凹陷效果。這些方法可以根據具體需求和設計要求來選擇使用，從而為頁面增添更多的美感和立體感。