最近做的项目有张设计图如下

需要给列表加上标号和连线，跟物流信息图有点类似，实现思路是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%;      }

效果如下：