尝试用CSS创建连续颜色模式

kzmpq1sx 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(72)

我正在尝试创建一个颜色模式，看起来像https://snipboard.io/po6jrn.jpg，而不仅仅是：

li:nth-of-type(1) {
   background: blue;
}

li:nth-of-type(2) {
   background: dark-blue;
}

li:nth-of-type(3) {
   background: red;
}

[...]

理想情况下，我希望能够以一种方式来构建CSS，即自动管理未知数量的动态元素的颜色模式。
我在测试中已经很接近了，但似乎无法获得我想要的颜色图案。请参阅我的Fiddle：http://jsfiddle.net/MaxxSkywalker/v0xpub7e/4/

css

来源：https://stackoverflow.com/questions/75465672/trying-to-create-sequential-color-pattern-with-css

2条答案

按热度按时间

vngu2lb81#

所以我选择尝试通过添加第四种颜色来使我的生活变得更容易，这将迫使三列网格中的对角线图案看起来，使用以下技术：

li:nth-of-type(4n+1) {
    background-color: orange;
}

li:nth-of-type(4n+2) {
    background-color: green;
}

li:nth-child(4n+3) {
    background: blue;
}

li:nth-child(4n) {
    background: red;
}

你可以在这里看到我的结果：https://snipboard.io/Esxlb8.jpg
我仍然希望看到这有效地做了三种颜色，但我可以解决这个结果现在。

赞(0）回复(0）举报 2023-02-17

bxfogqkk2#

尝试使用名为CSS涂鸦the link的css工具

赞(0）回复(0）举报 2023-02-17

我来回答

尝试用CSS创建连续颜色模式

2条答案

相关问题

热门标签

最新问答