随机边框颜色 CSS

Question

我有一个页面上有5个列表项，应用了以下CSS：

#content .gallery_work ul li {
    background-color: #FEF5D6 !important;
    border-right: 15px solid blue;
    color: #373C46;
    float: left;
    font-size: 13px;
    height: 250px !important;
    margin: 10px !important;
    text-align: center;
    width: 225px !important;
}

我需要的是5种可能的边框颜色，并且每个li元素随机应用其中一种颜色。有人知道如何实现吗？

- dvent

---

请说明您是否愿意使用SSSL或JavaScript。 - elimirks

是随机选择一次还是每次请求都随机选择？ - alex

无法使用纯HTML/CSS实现。 - Zoltan Toth

可能是重复的问题：http://stackoverflow.com/questions/10242999/random-color-border-javascript-around-database-entries-thumbnails - salih0vicX

请参见以下链接以了解JavaScript中的随机颜色生成器：https://dev59.com/tXM_5IYBdhLWcg3wMgAF - user123444555621

Answer 1

只需在JavaScript或您选择的服务器端语言中生成一个数字。

您可以在JavaScript中完成...

var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);

...或者PHP...

$color = "#" . dechex(rand(0, 0xFFFFFF));

你可以声明一组颜色，然后从中随机选择一个来使用，而不是完全随机选择颜色。

例如，你可以这样实现...

是的，请看下面的示例代码...

$colors = array("#000", "#fff");

$randomColor = $colors[array_rand($colors)];

- alex

---

我不确定原帖作者想要使用JS（还是服务器端），但解决方案非常优雅。+1 - Zoltan Toth

我的网站使用PHP，因此可以使用第二个选项。除了完全随机的颜色之外，是否有一种方法可以声明一个数字，然后让它从中随机选择？ - dvent

@ZoltanToth，您会建议除JS或服务器端语言之外的其他内容吗？ - Jules

请问您能否提供更多关于如何使用它的细节 - 我对于除了简单的CSS之外的任何东西都是相对初学者。 - dvent

所以，关于你添加的更新后的PHP代码，我应该把它放在哪个位置（例如头部、主体等），还需要其他信息才能在页面加载时实现吗？最后，如何将其限制在具有特定类的div或元素中？ - dvent

Answer 2

一个解决方案，涵盖所有边缘情况，例如添加适当的零填充：

function randomColor() {
    return (function(h) {
         return '#000000'.substr(0, 7 - h.length) + h;
    })((~~(Math.random() * (1 << 24))).toString(16));
}

原文作者 Remy Sharp: http://paulirish.com/2009/random-hex-color-code-snippets/#comment-34878

- david