在網頁設計中，時間圖標是一個很常見的元素。使用CSS來創建時間圖標可以讓你的網頁看起來更加現代化和精致。下面介紹一些CSS時間圖標的方法。 首先，我們需要將HTML元素與CSS樣式相結合。可以使用一個div元素來容納時間圖標，然后在CSS中定義這個div的樣式。我們可以給這個div定義一個特殊的class名，例如“time-icon”。

<div class="time-icon"></div>

接下來，我們需要在CSS中定義這個class的樣式。首先，我們需要設置div的寬度和高度，以及邊框的樣式和顏色。

.time-icon {
width: 25px;
height: 25px;
border: 3px solid #555;
border-radius: 50%;
}

接下來，我們需要在時間圖標的中心使用一個小圓點表示小時。我們可以使用一個偽元素:before來創建這個小圓點。

.time-icon:before {
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #555;
border-radius: 50%;
margin: 10px auto;
}

現在，我們的時間圖標已經完成了。我們可以在頁面中使用這個class名來創建多個時間圖標，每個圖標都可以更改大小和顏色。

<div class="time-icon" style="background-color: #ff0000;"></div>
<div class="time-icon" style="background-color: #00ff00;"></div>
<div class="time-icon" style="background-color: #0000ff;"></div>

使用這種方法，我們可以創建很多不同的時間圖標漂亮的效果。這個方法也可以用于其他圖標的創建，例如箭頭、按鈕等等。使用只需要在代碼中更改樣式即可。