在UI設計中，經常會出現一些需要制作凹陷矩形框的情況，這時候我們可以使用CSS來實現這個效果。下面讓我們來看看如何使用CSS制作凹陷矩形框。

首先，我們需要一個DIV元素作為容器，然后在CSS中設定該DIV元素的寬度、高度和邊框樣式。例如：

.container {
width: 300px;
height: 200px;
border: 2px solid #ccc;
}

接下來，我們需要設定一個偽元素來模擬出“凹陷”的效果。我們可以使用CSS中的:before偽元素來實現這個效果。在:before偽元素中，我們設定該元素的大小、位置和邊框樣式。例如：

.container:before {
content: "";
display: block;
height: 100%;
width: 100%;
position: relative;
z-index: -1;
top: -4px;
left: -4px;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.4);
}

在上面的代碼中，我們使用了內邊距來模擬出“凹陷”的效果，并使用了陰影效果來增強這種效果。

最后，我們可以在容器中插入一些內容，例如圖片、文字等，來展示這個凹陷矩形框的效果。例如：

<div class="container">
<img src="example.jpg" alt="example">
<h3>這是一個例子</h3>
</div>

通過以上的代碼和設定，我們就可以制作出一個凹陷矩形框，并在其中插入一些內容來展示這個效果。