事情是这样的，有时候我想给 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;
}
但是我想让一个底边 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;
}
