1

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

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

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

有没有办法不必为类别颜色的所有组合/排列创建类？

这是否需要使用类似于此响应的边框图像：CSS：带多种颜色的条纹？

感谢所有的帮助！

4

1 回答 1

0

是的，您可以使用链接的方法与一些 javascript 结合使用。在这里拉小提琴。

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 中运行。

于 2013-08-10T22:36:43.400 回答