css 边框颜色渐变如何实现

RT，想实现一下边框颜色的渐变，尝试的写了下：

    border-image: -webkit-linear-gradient( red , blue);
    border-image: -moz-linear-gradient( red, blue);
    border-image: linear-gradient( red , blue);

形成的边框效果如下

颜色倒是渐变了，但是边框显示不完全，求教下这是怎么回事，还有没有没其他方法的边框渐变

---

设置后面的两个值啊，图片边框向内偏移，图片边框的宽度

border-image: -webkit-linear-gradient( red , blue) 30 30;
border-image: -moz-linear-gradient( red, blue) 30 30;
border-image: linear-gradient( red , blue) 30 30;

效果：