我正在尝试使用该选项来设置border-image和属性，但对同一元素使用不同的值。我不知道该怎么做，因为通过我的尝试，渐变参数似乎重叠，并且页面似乎采用了最后设置的值。backgroundrepeating-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与 1 并不对称background。如果可能的话，我想用一个 div 为每个属性获得不同的渐变。
鸿蒙传说
相关分类