鲁达 最近做的项目有张设计图如下
需要给列表加上标号和连线，跟物流信息图有点类似，实现思路是2、3、4添加完整的左边框，1、5添加一半左边框。完整左边框好说，用border-left就能实现，但是一半的边框怎么实现呢？第一时间想到的是用边框渐变或者伪类来实现。
1. 边框渐变
首先我们了解一下border-image 的相关属性值
/*正式语法*/ border-image：<'border-image-source'>|| <'border-image-slice'>|| <'border-image-width'>|| <'border-image-outset'>]|| <'border-image-repeat'> /* 默认值为 none 100% 1 0 stretch*/ border-image-source——资源图片地址（默认为none），此位置可以被渐变颜色所替代，这个渐变颜色正是我们此次需要用到的。border-image-slice——边界切片，将整个区域划分为9个切片，如下图所示。注意上下/左右数值之和一般不能超过元素的高/宽。
border-image-width——边框宽度，此值不改变实际边框宽度，但是会改变显示的宽度。
border-image-outset——边框图像区域超出边框的量，可以理解成向外偏移量。
border-image-repeat——边框图像铺开方式（repeated，rounded，stretched）。
根据MDN中对border-image的描述，我们有两点需要注意：1.使用border-image 时，其将会替换掉 border-style属性所设置的边框样式；2.规范要求使用 border-image 时边框样式必须存在（部分浏览器没有实现这一点）由此我们可以看出虽然使用border-image 会覆盖掉 border-style，但是我们还是需要声明 border-style。了解了以上知识以后我们话不多说，直接冲冲冲！上代码：
<!--html代码--> <div class="box"></div> /*css 代码*/ .box { height: 200px; width: 200px; border-left: 5px dashed; background-color: skyblue; border-image: -webkit-linear-gradient( top, transparent 50%, green 50%, green 100% ) 1; } 得到下图效果。
不难发现，这个边框虽然是一半，但是是实线，不符合我们设计，所以还需要将其改成虚线，但是根据文档我们没有地方可以调整，这个方法无效。但是我不死心，难道用渐变真的不能实现吗？在网上搜索很久终于发现了另外一个实现方法——反向镂空（具体可以看看张鑫旭大佬的博客）。
<!--html代码--> <div class="box"> <div class="content"></div> </div> /*css 代码*/ .box { width: 150px; border-left: 5px dashed skyblue; background: linear-gradient( to bottom, transparent 50%, green 50%, green ); background-origin: border-box; } .content { height: 100px; background-color: skyblue; } 从效果我们不难看出，该方法是通过.box背景渐变来实现边框渐变的效果，同时保留边框的虚线特性。运用上述方法需要注意两点.box的边框颜色要与.content的背景颜色一致，同时.box渐变上部分的颜色也要与.content的背景颜色一致。
2. 伪类
使用伪类就简单多了，直接上代码吧
<!--html代码--> <div class="box"> <div class="content"></div> </div> /*css 代码*/ .box { height: 200px; width: 200px; background-color: skyblue; position: relative; } .box:after { content: ""; position: absolute; height: 50%; border-left: 5px dashed green; top: 50%; } 效果如下：