CSS分段進度條是網頁設計中經常會用到的一種元素，它可以展示一個項目或一個任務的完成情況，非常實用。下面我們就來學習如何制作一個簡單的CSS分段進度條。

.progress-bar {
width: 100%;
height: 20px;
background-color: #f2f2f2;
border-radius: 10px;
}
.progress-bar-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: #009688;
}
.progress-bar-segment {
height: 100%;
flex-grow: 1;
background-color: #4CAF50;
transition: all 0.2s ease-in-out;
}

我們首先定義了一個.progress-bar的元素，它的寬度為100%，高度為20px，背景顏色為淺灰色，還有一個圓角。接下來，我們定義了一個.progress-bar-inner的元素，它包含了進度條的所有段落。我們再定義一個.progress-bar-segment的元素，它代表進度條每一個段落的顏色。接下來，我們使用Flexbox來將這些.segment元素與父元素.progress-bar-inner對齊。最后，我們使用transition來為顏色變化添加動畫效果。

這就是一個簡單的CSS分段進度條的制作方法。你可以根據自己的需要，更改顏色、高度、寬度等屬性來適應不同的網頁設計需求。希望這個教程對你有所幫助！