物流的纯css实现方法

首先我们来看看UI给出的设计图。

为什么到达是最前面，为什么物流顺序是倒叙的，这是什么用户习惯，这是我拿到设计稿的问题，但是这里不谈设计，因为审美这个东西无法评估。那么这里我就做一个顺序的来对比一下吧。

由于建采这个项目比较赶，我基本只拿到一直png设计稿和一些psd文件，所以这里我们不考虑用图片和字体图标。

 

思路：解决难点，就是这个圆，通常的思路就是使用两个元素通过border-radius和定位使他们重叠而达到这个双圆的效果。这样的缺陷很明显，定位的位置很难调整，不能保证这两个圆是否绝对的同心。所以这里决定用一个元素解决这两个圆。每个元素都有边框、阴影、轮廓、想要做成这个同心圆是很简单的，只不过要考虑是否这些外层都受到border-radius的影响。代码如下：css

html

效果图:

通过测试我们知道轮廓和阴影在同一层级,且轮廓不受border-radius影响。因此我们只需要用元素本身背影色加边框加阴影便可以完成这个双圆形的效果。
html代码

css代码

效果

详解：利用背景颜色和边框颜色和阴影做同心圆， 用伪类把同心圆加到每个li上并定位到边框上， 设置显示每个li的左边框,设置行高是同心圆的两倍用来对齐文字，使用伪类为最后一个加上状态，这样一个物流的效果就出来啦。

 

这样做的优势：

1、UI可以不用做成图片或字体图标，减少了UI的工作量。
2、后台不用再传一个
3、前端我们只需要显示数据，不需再要获取状态和添加状态
4、减少了浏览器的请求，使得网站性能更加优化