我正在嘗試使用該選項來設置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 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消