我正在尝试使用该选项来设置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 回答
鸿蒙传说
TA贡献1865条经验 获得超7个赞
您可以使用多个背景：
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>
- 1 回答
- 0 关注
- 93 浏览
添加回答
举报
0/150
提交
取消