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

【问题标题】：Can I use a gradient with border-color?我可以使用带有边框颜色的渐变吗？
【发布时间】：2014-05-17 07:35:43
【问题描述】：

我正在尝试将具有渐变颜色的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

非常欢迎任何想法。

谢谢。

【问题讨论】：

标签： html css border gradient

【解决方案1】：

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

【讨论】：

【解决方案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 );
}

【讨论】：