如何设置元素高度一半的边框 设置元素宽度和高度

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

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

效果如下：