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

使用伪类的实现方法

HTML的结构

   <el-form ref="form-head" label-width="auto" inline class="form-header-box">
            <transition-group name="el-zoom-in-center" tag="div">
              <!-- <el-form-item key="name" label="姓名">
            <el-input v-model="usName" placeholder="请输入相关员工名称"></el-input>
          </el-form-item> -->
              <el-form-item key="names" label="员工名称" class="multiple-input">
                <el-input
                  v-model="employeeName"
                  size="small"
                  clearable
                  placeholder="搜索员工名称"
                ></el-input>
              </el-form-item>
              <el-form-item key="search" class="mini-search">
                <el-button class="query-btn el-icon-search" @click="searchBtn"></el-button>
              </el-form-item>
              <el-form-item key="reset">
                <el-button class="query-btn" @click="resetBtn('resetClick')">重置</el-button>
              </el-form-item>
            </transition-group>
          </el-form>

重点CSS样式:

.form-header-box {
  ::v-deep .el-input__inner {
    border-radius: 4px 0 0 4px;
    border-right: 0;
  }
  ::v-deep .el-form-item__content {
    line-height: 0;
  }
  ::v-deep .el-button {
    border-radius: 0 4px 4px 0;
  }
  ::v-deep .el-form-item__label {
    line-height: 32px;
  }
  .mini-search ::v-deep .el-button {
    border-radius: 0;
    border-left: 0;
  }
  .mini-search {
    position: relative;
  }
  .mini-search:after {
    content: '';
    position: absolute;
    height: 50%;
    border-left: 1px solid rgb(220, 223, 230);
    top: 25%;
  }
  // ::v-deep .
}

提炼出来比较重要的代码就是

  .mini-search {
    position: relative;
  }
  .mini-search:after {
    content: '';
    position: absolute;
    height: 50%;
    border-left: 1px solid rgb(220, 223, 230);
    top: 25%;
  }

通过绝对定位和伪类实现左侧一半的竖线
下面是效果图展示：