css 边框颜色渐变如何实现

Question

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

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

形成的边框效果如下

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

Answer 1

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

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;

效果：

Answer 2

圆角的边框渐变??

Answer 3

使用box-shadow，可以实现单色渐变，双色不好搞
/ offset-x | offset-y | blur-radius | spread-radius | color /
box-shadow: 0 0 2px 1px red;

Answer 4

<style>
.button{
background-image: linear-gradient(45deg, #fff, #fff), linear-gradient(139deg, rgb(251, 136, 23), rgb(255, 75, 1), rgb(193, 33, 39), rgb(224, 42, 255));
        border: 2px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: border-box, border-box;
        background-color: rgba(0, 0, 0, 0.2);
        display: inline-block;
        padding: 2px 10px;
        border-radius: 5px;
}
</style>
<a class="button">test</a>