是否可以使用重复线性渐变属性设置边框图像和背景？
我正在尝试使用该选项来设置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 为每个属性获得不同的渐变。
元芳怎么了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>或者像下面这样调整你的代码，你只是缺少切片属性：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>
随时随地看视频慕课网APP
相关分类
Html5