空杯容器是一種常見的UI設計元素，用于顯示一個圓形的空杯子，通常用于展示飲品或其他液體的數量、容量等信息。在CSS中實現空杯容器的效果并不難，下面我們來看一下具體的實現方法。

.empty-cup {
width: 100px;
height: 100px;
border: 3px solid #ccc;
border-radius: 50%;
position: relative;
}
.empty-cup::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top: 3px solid #ccc;
border-right: 3px solid #ccc;
border-left: 3px solid #ccc;
border-bottom: none;
border-radius: 50% 50% 0 0;
}
.empty-cup::after {
content: '';
position: absolute;
bottom: 0;
left: -3px;
width: 106px;
height: 16px;
background: #ccc;
border-radius: 0 0 50% 50%;
}

首先，我們定義了一個包裹空杯的容器，它應該具有一定的寬度和高度，還需要設置圓角樣式。為了顯示出空杯的效果，我們使用了偽元素::before和::after，它們分別代表了空杯的上半部分和下半部分。

::before元素的樣式中，我們設置了四條邊框，去除了下邊框，并使用了border-radius屬性控制了邊角的樣式，實現了圓形的上半部分。而::after元素的樣式中，則設置了一個寬度比容器大一點的矩形，用于顯示空杯的下半部分。

通過這樣的CSS樣式，我們就可以實現一個簡單的空杯容器，同時也可以根據需要修改顏色、大小等樣式屬性，讓它更加符合我們的需求。