CSS凹槽效果是網頁設計中常用的一種設計效果，可以使頁面元素具有立體感和深度感，達到更好的視覺效果。下面將介紹如何使用CSS實現凹槽效果。

/*創建凹槽容器*/
.container {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
/* 創建凹槽 */
.container::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #fff;
box-shadow: 0 0 0 50px #ccc inset;
}

上面的代碼中，我們創建了一個名為container的容器，它有200px的寬度和高度，并且有1px的實線邊框。接著，通過設置position:relative屬性，讓其位置相對于父容器進行。而凹槽效果是通過在容器前面插入一個:before偽類來實現的。在:before 中，我們使用position:absolute屬性來定位，并設置屬性top，left，right和bottom，使其填充容器邊緣。 然后，我們指定了一個背景顏色#fff，并在其中使用了一個50px的內部陰影，來模擬凹槽的效果。

最終的效果就像下面這樣：

<div class="container"></div>