1px边框的渐变

<div class="box">banner</div>
    .box {
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 5px;
      background-color: #ccc;
      background-size: 0 2px;

      transition: all .5s ease;
      background-position: center bottom;
    }

    .box:hover {
      background: #ccc linear-gradient(to right, blue, blue) no-repeat center bottom;
      background-size: 100% 2px;
    }