jquery - 多色边框

Question

有没有办法动态地创建最多具有 3 种颜色的边框？在我的网站上，根据帖子所属的类别，我希望左边框显示特定的颜色。目前有 15 个类别。

例如，如果帖子属于 1 个类别，则左边框应该只是与类别对应的颜色。如果帖子分为两类，左边框应该一半是一种颜色，一半是另一种颜色。最后，如果它属于 3 个或更多类别，则左边框应该是一种颜色的 1/3，另一种颜色的 1/3，最后一种颜色的 1/3 对应于其中的 3 个类别。

这可以使用 CSS 吗？有可能使用 jQuery 吗？

有没有一种方法可以做到这一点而不必为类别颜色的所有组合/排列创建类？

这是否需要使用类似于此响应的边框图像:CSS: Stripe with multiple colors ？

感谢大家的帮助!

Answer 1

是的，您可以使用您链接的方法结合一些 javascript 来完成。 Fiddle here .

CSS

#post {
    width: 300px;
    height: 300px;
    background-color: whitesmoke;
    background-size: 6px 100%;
    background-repeat: no-repeat;
}

JS

你可以传递任意数量的颜色，它会为你设置边框。

function setBorderColors()
{
    var bgStr = '-webkit-gradient(linear, left top, left bottom';
        inc = 1 / arguments.length;
    for(var i = 0; i < arguments.length; i++)
    {        
        bgStr += ', color-stop(' + i * inc + ', ' + arguments[i] + '), color-stop(' + (i + 1) * inc + ', ' + arguments[i] + ')';
    }
    $('#post').css('background-image', bgStr + ')');
}

希望对您有所帮助!

编辑:我应该提一下，这不是跨浏览器。它可以适应。它目前只能在 Chrome 和 Safari 中运行。