时间戳

首页 > 解决方案 > 如何创建重复的嵌套 div 彩虹是 CSS

html - 如何创建重复的嵌套 div 彩虹是 CSS

问题描述

我想要一些具有不同颜色边框的嵌套 div，这些边框具有重复的图案。

例如，我可以有 5 种颜色，红色、蓝色、绿色、黄色、橙色

我希望得到与下面相同的效果，但仅根据 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>

标签： htmlcss

解决方案

如果您可以使用不同的元素交替嵌套，则可以尝试使用 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>

推荐阅读