事情是这样的，有时候我想给 border 加点动效，但是无奈 css 本身的
border 的动画不能满足我的需要，比如我用 border 最多也就只能做到如下的动画

代码如下：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  transition: all 1s ease;
}
.box:hover {
  border: 5px dashed blue;
}

border动画

但是我想让一个底边 hover 之后从无到有， 这一点估计使用 border 很难做到
于是乎， 我就用 background 的渐变色来模拟 border , 然后达到了我想要的效果。

<div class="box"></div>

.box {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  background-color: #ccc;
  transition: all .5s ease;
  background: #ccc linear-gradient(to right, blue, blue) no-repeat center bottom;
  background-size: 0 2px;
  background-position: center bottom;
}

.box:hover {
  background-size: 100% 2px;
} 

效果链接