是否可以使用重复线性渐变属性设置边框图像和背景？

Question

我正在尝试使用 repeating-linear-gradient 选项设置 border-image 和 background 属性，但相同的 <div> 元素具有不同的值。我不知道该怎么做，因为在我的尝试中，渐变参数似乎重叠了，而且页面似乎也采用了最后设置的值。

这是我得到的代码和输出：

body {
    margin: 0;
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    height: 20%;
    top: 80%;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello Whosebug Community!</p>
  </div>
</body>

如您所见，.under_banner 有 top-border 属性，实际上 repeating-linear-gradient 与 background 不对称。如果可能的话，我想为每个属性只用一个 div 获得不同的渐变。

提前致谢！

Answer 1

您可以使用多个背景：

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    background: 
      repeating-linear-gradient(130deg, #f6d808, #ffc107 10%) bottom/100% calc(100% - 10px),
      repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background-repeat:no-repeat;
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello Whosebug Community!</p>
  </div>
</body>

或者像下面这样调整你的代码，你只是缺少切片属性:

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%) 10; /* added the slice here */
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello Whosebug Community!</p>
  </div>
</body>

是否可以使用重复线性渐变属性设置边框图像和背景？

Is it possible to set border-image and background both with repeating-linear-gradient property?

html

css

linear-gradients

repeating-linear-gradient

是否可以使用重复线性渐变 属性 设置边框图像和背景？

Is it possible to set border-image and background both with repeating-linear-gradient property?

html

css

linear-gradients

repeating-linear-gradient

是否可以使用重复线性渐变属性设置边框图像和背景？