设置不同的边框颜色库项目

时间：2017-01-10 作者：Muhammad Muazzam

我有以下代码可以很好地处理单边框颜色。

.gallery img {
    box-shadow: 0px 0px 44px #999;
    border: 70px solid white;
border-color:#0d1c49;
    padding: 10px;
width:500px;
}
但我想为每个画廊项目制作不同的边框颜色

1 个回复
SO网友:funkysoul

如果您使用SASS：您可以使用此代码段并进行相应的更改

$colors: red, orange, yellow, green, blue, purple;
$repeat: 20  // How often you want the pattern to repeat.
// Warning: a higher number outputs more CSS.

@for $i from 1 through $repeat {
    .gallery img:nth-child(#{length($colors)}n+#{$i}) {
         border-color: lighten(nth($colors, random(length($colors))), 20%);
    }
}

.gallery img {
    list-style: none;
    padding: 1em;
}
如果您不能使用SASS，那么必须使用javascript/jquery解决方案来实现这一点。我发布了一个生成随机颜色值的片段。现在，您只需找到一个逻辑，即可将颜色添加到相应的项目中。

var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
如果需要进一步帮助，请发布更多代码

标签： css   gallery   小码农  

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中，必须将下面的代码放入函数中。php的子主题，但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它，那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我，放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s