首先我們來看看ui給出的設計圖。
為什麼到達是最前面，為什麼物流順序是倒敘的，這是什麼使用者習慣，這是我拿到設計稿的問題，但是這裡不談設計，因為審美這個東西無法評估。那麼這裡我就做乙個順序的來對比一下吧。
由於建採這個專案比較趕，我基本只拿到一直png設計稿和一些psd檔案，所以這裡我們不考慮用和字型圖示。
思路：解決難點，就是這個圓，通常的思路就是使用兩個元素通過border-radius和定位使他們重疊而達到這個雙圓的效果。這樣的缺陷很明顯，定位的位置很難調整，不能保證這兩個圓是否絕對的同心。所以這裡決定用乙個元素解決這兩個圓。每個元素都有邊框、陰影、輪廓、想要做成這個同心圓是很簡單的，只不過要考慮是否這些外層都受到border-radius的影響。**如下：css
html
效果圖:
通過測試我們知道輪廓和陰影在同一層級,且輪廓不受border-radius影響。因此我們只需要用元素本身背影色加邊框加陰影便可以完成這個雙圓形的效果。
html**
css**
效果詳解：利用背景顏色和邊框顏色和陰影做同心圓， 用偽類把同心圓加到每個li上並定位到邊框上， 設定顯示每個li的左邊框,設定行高是同心圓的兩倍用來對齊文字，使用偽類為最後乙個加上狀態，這樣乙個物流的效果就出來啦。
這樣做的優勢：
1、ui可以不用做成或字型圖示，減少了ui的工作量。
2、後台不用再傳乙個
3、前端我們只需要顯示資料，不需再要獲取狀態和新增狀態
4、減少了瀏覽器的請求，使得**效能更加優化
純css實現垂直居中的方法
垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化 在面試中也是經常問到的考點，現在我們一起來複習一下這些垂直居中的方法 parent child 我是內容 複製 此方...
純css實現箭頭
很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...
純CSS實現垂直居中的幾種方法
垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方法1 table cell html結構 垂直居中 方法2 display flex box2 方法3 絕對定位和...