Question

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

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

我试试

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

有一个名为border的css属性，它以厚度，边框类型和边框颜色作为参数

如果要使用渐变，请使用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/

具有线性渐变的边界图像

2 个答案: