CSS3 垂直時間軸是一個非常好用的特性，它可以幫助我們在網頁上制作出非常漂亮且直觀的時間軸頁面。下面我們來看看如何使用 CSS3 來制作一個簡單的垂直時間軸。

.timeline {
position: relative;
padding: 50px 0;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
background-color: #ccc;
}
.timeline li {
position: relative;
margin: 0 0 50px 0;
padding-left: 50px;
list-style: none;
}
.timeline li:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 50%;
}
.timeline li:after {
content: '';
position: absolute;
top: 10px;
left: -25px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #ccc;
border-bottom: 10px solid transparent;
border-left: none;
}
.timeline li div {
position: relative;
top: -5px;
left: -10px;
display: inline-block;
padding: 6px 10px;
background-color: #f2f2f2;
border-radius: 8px;
}

用上述代碼制作的時間軸，可以自適應寬度，并能添加內容。并且，這個時間軸還支持多條垂直線、樣式自定義等功能。接下來，我們就需要根據自己的需求來進行定制操作，比如說可以調整線的顏色、寬度、圖標的大小、樣式等。

總的來說，CSS3 垂直時間軸非常實用，它是展示時間流程、發展歷程等內容的最佳工具之一。在實際的項目中，只需要在頁面中加入相應的代碼即可輕松實現這一功能。建議大家在學習 CSS3 的過程中，多多接觸、實踐這種新穎的樣式技術，這將有助于提高自己的前端開發技能。