具有线性渐变的边框图像

Question

我不是 Jquery 方面的专家，但我尝试使用 随机颜色 为 each li 构建 下划线颜色 例如，这是一个粗略的结构：Jsfiddle here

我在 Jquery 中使用函数随机颜色，如何将 function random color 中的 Linear gradient 设置为看起来像示例？

我试试

FROM
return 'radial-gradient(at top left, '+c1.rgb+'25%,'+c2.rgb+'50%,'+c3.rgb+'100%)';

TO
return 'linear-gradient(left, '+c1.rgb+'25%,'+c2.rgb+'50%,'+c3.rgb+'100%) 0 0 100% 0/0 0 5px 0 stretch';

并将函数 Jquery 从 background 更改为 border，但不起作用

你能告诉我哪里做错了吗？

提前致谢

Answer 1

试试这个

 return 'radial-gradient(at bottom, '+c1.rgb+'25%,'+c2.rgb+'50%,'+c3.rgb+'100%)';

这里可能对你有帮助：

Bottom Gradient Border

Answer 2

有一个css 属性叫做border，它的参数是粗细，边框类型和边框颜色

如果要使用渐变，请使用 css 属性 border-image

<div class="box">

  hey there
</div>

css:

.box{
      width: 250px;
      height: 20px;
      background: transparent;
      border-bottom: 5px solid transparent;
      -moz-border-image: -moz-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      -webkit-border-image: -webkit-linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image: linear-gradient(left,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0) 100%);
      border-image-slice: 1;
    }

http://jsfiddle.net/agkety8w/

对于您的情况，请执行以下操作：梯度：

 return 'linear-gradient(to left,  '+c1.rgb+' 0%, '+c2.rgb+' 50%, '+c1.rgb+'

函数：

function PPAP() {
    elements = $('li');
    elements.each(function() { $(this).css({"borderImage":random(), "borderImageSlice": "1","borderBottom": "5px solid transparent"}); });
}

https://jsfiddle.net/tdeqvoaa/

具有线性渐变的边框图像

Border Image with Linear Gradient

css

jquery

border

linear-gradients