我可以使用带边框颜色的渐变吗？

Question

我正在尝试将border-bottom属性设置为我的DIV元素的渐变颜色。

我期待的输出应该与此类似。

所以任何人都可以告诉我，如果不使用图像并且只使用纯CSS，我能达到这个目的吗？

这是我尝试的方式

.border-gradient {
    border-width: 0 0 3px 0;
    -webkit-border-image: 
        -webkit-gradient(linear, 100% 0, 0 0, from(#53001e), to(rgba(152, 31, 74, 0))) 100% 1;
    -webkit-border-image: 
        -webkit-linear-gradient(left, #53001e, rgba(152, 31, 74, 0)) 100% 1;
    -o-border-image:
             -o-linear-gradient(left, #53001e, rgba((152, 31, 74, 0)) 100% 1;
    -moz-border-image:
           -moz-linear-gradient(left, #53001e, rgba((152, 31, 74, 0)) 100% 1;   
}

但不能让它100％工作。

JS FIDDLE

任何想法都会受到欢迎。

谢谢。

Answer 1

您的图像看起来颜色会减少色调然后从左向右增加。不幸的是，CSS目前还无法做到这一点。它只能一次增加或减少色调。

Answer 2

试试这个

.border-gradient {
    background: rgba(92,7,52,1);
    background: -moz-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,7,52,1)), color-stop(12%, rgba(134,29,84,1)), color-stop(47%, rgba(255,93,177,1)), color-stop(100%, rgba(83,0,30,1)));
    background: -webkit-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
    background: -o-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
    background: -ms-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
    background: linear-gradient(to right, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c0734', endColorstr='#53001e', GradientType=1 );
}