邊界圖像的線性漸變

我不是專家jQuery的，但我想建立下劃線顏色與隨機顏色爲each li像例如，這是一個粗略的結構：Jsfiddle here 邊界圖像的線性漸變

我使用的功能隨機顏色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';

而且從background改變功能jQuery來border，但沒有工作

能否請你告訴我，我做錯了什麼？

感謝提前

來源

2016-09-29 Newbi

有一個叫border CSS屬性，它需要一個PARAM厚度，邊框的類型和邊框的顏色

，如果你想使用一個漸變使用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/

來源

2016-09-29 03:58:53 madalinivascu

你的意思是這樣'elements.each（函數（）{$（本）的.css（「邊界」，隨機（））; }）;'？ – Newbi

您將需要漸變的邊框圖像屬性 – madalinivascu

我已更新我的答案 – madalinivascu

試試這個

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

這裏可以幫助你：

Bottom Gradient Border

來源

2016-09-29 03:44:45

邊界圖像的線性漸變

回答

相關問題