CSS 是前端開發中非常重要的技術，可以通過 CSS 來實現各種各樣的效果。其中，凹陷的效果是很受歡迎的一種。下面我就來詳細講解一下如何用 CSS 來實現凹陷的效果。

.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
box-shadow: inset 0 0 10px #999;
}

以上就是實現凹陷效果的 CSS 代碼。它的實現原理是通過 box-shadow 屬性來實現的。具體來說，我們在 box-shadow 屬性中使用了 inset 關鍵字，表示生成一個內部陰影，然后設置陰影的顏色和大小。

同時，我們也可以通過調整 box-shadow 的參數來實現不同形狀和樣式的凹陷效果。比如，如果我們將陰影的大小調大，就會出現更深的凹陷效果：

.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
box-shadow: inset 0 0 20px #999;
}

當然，這只是凹陷效果的一種基本實現方式。要實現更為復雜的效果，我們還可以通過其他 CSS 屬性和技巧結合使用，比如 background-image、border-radius 等等。

總之，CSS 的凹陷效果為我們的網頁設計提供了更多的可能性，我們可以通過不斷地嘗試和實踐，來創造出更為優美和獨特的效果。