CSS中的空心圓是一種常用的形狀，可以通過border屬性來實現。下面是一個簡單的例子：

.circle {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
}

在這個例子中，我們給一個div元素設置了寬度和高度，然后通過border屬性設置了圓形邊框，并且使用border-radius屬性將這個矩形變為了圓形。

除了實心圓外，我們還可以創建一個空心圓。方法是將背景顏色設置為透明，然后再添加border屬性。下面是一個簡單的空心圓的示例：

.circle-empty {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
background-color: transparent;
}

在這個例子中，我們使用了和實心圓相同的屬性，只是將背景顏色設置為了透明。這樣我們就得到了一個空心的圓形。

空心圓常常用于展示進度條的進度，如下面的示例：

.progress-bar {
width: 100%;
height: 20px;
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
}
.progress-bar .progress {
width: 50%;
height: 100%;
background-color: black;
border-radius: 10px;
}

在這個例子中，我們使用一個div元素來模擬進度條。我們設置了一個外層的容器，然后在容器內部創建了一個空心圓。進度條的進度通過一個內部的div元素來實現，我們設置了這個div元素的寬度來表示進度條的進度。

通過CSS可以輕松地創建空心圓，并且可以應用到各種場景中。無論是作為圖形效果還是作為進度條的展示，都可以用CSS來實現。