1

我正在尝试使用该选项设置border-image和background属性repeating-linear-gradient，但对同一<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 StackOverflow Community!</p>
  </div>
</body>

输出

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

先感谢您！

4

1 回答 1

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 StackOverflow Community!</p>
  </div>
</body>

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

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 StackOverflow Community!</p>
  </div>
</body>

相关更多细节：渐变边框图像的border-image-slice

于 2020-03-06T11:19:32.050 回答