首先我們來看看UI給出的設計圖。
為什么到達是最前面，為什么物流順序是倒敘的，這是什么用戶習慣，這是我拿到設計稿的問題，但是這里不談設計，因為審美這個東西無法評估。那么這里我就做一個順序的來對比一下吧。
由於建采這個項目比較趕，我基本只拿到一直png設計稿和一些psd文件，所以這里我們不考慮用圖片和字體圖標。
思路：解決難點，就是這個圓，通常的思路就是使用兩個元素通過border-radius和定位使他們重疊而達到這個雙圓的效果。這樣的缺陷很明顯，定位的位置很難調整，不能保證這兩個圓是否絕對的同心。所以這里決定用一個元素解決這兩個圓。每個元素都有邊框、陰影、輪廓、想要做成這個同心圓是很簡單的，只不過要考慮是否這些外層都受到border-radius的影響。代碼如下：css
html
效果圖:
通過測試我們知道輪廓和陰影在同一層級,且輪廓不受border-radius影響。因此我們只需要用元素本身背影色加邊框加陰影便可以完成這個雙圓形的效果。
html代碼
css代碼
效果
詳解：利用背景顏色和邊框顏色和陰影做同心圓， 用偽類把同心圓加到每個li上並定位到邊框上， 設置顯示每個li的左邊框,設置行高是同心圓的兩倍用來對齊文字，使用偽類為最后一個加上狀態，這樣一個物流的效果就出來啦。
這樣做的優勢：
1、UI可以不用做成圖片或字體圖標，減少了UI的工作量。
2、后台不用再傳一個
3、前端我們只需要顯示數據，不需再要獲取狀態和添加狀態
4、減少了瀏覽器的請求，使得網站性能更加優化