多色边框

时间:2013-08-10 21:45:32

标签: jquery css border css3

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

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

这可以使用CSS吗?是否可以使用jQuery?

有没有办法在不必为类别颜色的所有组合/排列创建类的情况下呢?

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

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

是的,你可以使用链接的方法和一些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。