CSS3配送進度是網頁設計中經常使用的一種元素，它可以讓網站的用戶了解到其商品到達的時間，為顧客提供不錯的購物體驗。下面是CSS3配送進度的使用方法。

.order-wrapper {
width: 500px;
margin: 0 auto;
padding: 50px 0;
text-align: center;
}
.step-number {
display: inline-block;
position: relative;
width: 60px;
height: 60px;
margin-right: 50px;
}
.step-number:before,
.step-number:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
}
.step-number:before {
width: 2px;
height: 100%;
background: #e3e3e3;
left: 29px;
}
.step-number:after {
width: 20px;
height: 20px;
border-radius: 50%;
background: #e3e3e3;
left: 19px;
}
.active-step {
background: #f27c32;
}
.active-step:after {
background: #fff;
}
.step-text {
display: inline-block;
}
.step-title {
font-weight: bold;
margin-bottom: 5px;
}
.step-info {
font-size: 14px;
}

首先定義一個包裹所有元素的div，設置該div的樣式，使其在中間顯示，同時設置了一些padding，讓進度條距離頂部有一定的距離。接著定義每個步驟的樣式，使用了偽元素:before和:after，加上背景色和圓角，使步驟更具有美感。

在當前步驟的樣式中，設置了背景色樣式并加上了一些額外的樣式，使得當前步驟更加顯著，更能夠引起用戶的注意。最后，定義每個步驟的文字樣式，包括步驟的標題和信息描述。