CSS可以通過偽元素來實現(xiàn)半圓凹槽的效果。我們可以使用接下來展示的CSS代碼來實現(xiàn)這個效果：

.box {
position: relative;
background: #f2f2f2;
width: 300px;
height: 150px;
border-radius: 10px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 20px;
background: #f2f2f2;
border-radius: 50%;
box-shadow: 0 0 0 10px #f2f2f2;
}
.box::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 20px;
background: #f2f2f2;
border-radius: 50%;
box-shadow: 0 0 0 10px #f2f2f2;
}

代碼中的.box類設(shè)置頁面元素的長寬和邊框。我們使用偽元素:before和:after來實現(xiàn)半圓凹槽的效果。我們在偽元素上設(shè)置一個寬的圓，用于減少邊框的寬度，以此創(chuàng)建一個半圓形。上面的before偽元素和下面的after偽元素都是這樣實現(xiàn)的。我們同樣可以使用陰影屬性來隱藏下面的邊框，這樣半圓形就成了一個凹槽。