如何使用CSS创建一个嵌套div的重复彩虹。

Question

如何使用CSS创建一个嵌套div的重复彩虹。

3

我希望有一些嵌套的div，边框颜色不同，具有重复的模式。

例如，我可以有五种颜色：红色，蓝色，绿色，黄色，橙色。

我希望使用基于DIV位置的CSS实现与下面相同的效果，而不是实际上必须在每个div上添加类名。

<div class="redBorder">
  <div class="blueBorder">
    <div class="greenBorder">
      <div class="yellowBorder">
        <div class="orangeBorder">
          <div class="redBorder">
            <div class="blueBorder">
              <div class="greenBorder">
                <div class="yellowBorder">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这与此处发布的问题类似，但我想指定每个第n步使用的颜色。使用CSS在嵌套的div上重复一组颜色我已尝试从给出的示例中使用以下内容...

<style>
    div {
        border: 2px solid #ccc;
        border-top: 5px solid #ccc;
        padding: 5px;
        padding-top: 50px;
        border-radius: 5px;
    }

    div {
        border-color: linear-gradient(
                to right,
                red calc(0 * 100% / 4) calc(1 * 100% / 4),
                blue calc(1 * 100% / 4) calc(2 * 100% / 4),
                green calc(2 * 100% / 4) calc(3 * 100% / 4),
                yellow calc(3 * 100% / 4) calc(4 * 100% / 4)
            )
            calc(var(--x) * 100% / 3) 0/400% 100%;
    }
</style>

使用以下标记，但是这并没有起作用

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

- user3284707

请参考以下链接：https://stackoverflow.com/a/58685546/8620333 - Temani Afif

另一个想法：https://dev59.com/E7bna4cB1Zd3GeqPY1A3#57956502 - Temani Afif

谢谢提供这些示例，但我还在努力让它们正常工作。使用线性渐变的边框颜色似乎无法生效。 - user3284707

请包含您的完整代码，包括您自己尝试创建颜色的部分。 - Kokodoko

我已经添加了我的尝试# - user3284707

“border-color with linear gradient doesn't seem to work” - 渐变实际上被视为一种“图像”，而不是“颜色”。 - 04FS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

如果您可以使用不同的元素交替嵌套，您可以尝试使用CSS变量来实现以下类似的效果。我们需要不同的元素才能在每个级别上递增一个变量，并组合两个变量。(相关：是否可以在css中表示递归变量？)

我考虑了4种颜色，但您可以轻松扩展到任意数量：

:root {
  --p:0;
  --x:0;
}

.first,
.first span,
.first div{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first span {
  --p:calc(var(--x) + 1);
  display:block;
}
.first div {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <span>
    <div>
     <span>
      <div>
      <span>
       <div>
        <span>
          <div>
          </div>
        </span>
       </div>
     </span>
    </div>
   </span>
  </div>
 </span>
</div>

您也可以保留相同的元素，使用类来区分：

:root {
  --p:0;
  --x:0;
}

.first,
.first *{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first div.x {
  --p:calc(var(--x) + 1);
}
.first div:not(.x) {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <div class="x">
    <div>
      <div class="x">
        <div>
          <div class="x">
            <div>
              <div class="x">
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>