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。

多色边框

1 个答案:

CSS

JS