是否可以使用重复线性渐变属性设置边框图像和背景？
[英]Is it possible to set border-image and background both with repeating-linear-gradient property?
问题描述
I'm trying to set border-image and background properties both with the repeating-linear-gradient option, but with different values for the same <div> element.
我正在尝试使用repeating-linear-gradient选项设置border-image和background属性，但对同一<div>元素使用不同的值。 I don't know how to do it, because with my attempt it seems the gradients parameters are overlapped and it also seems the page takes the last values setted.我不知道该怎么做，因为在我的尝试中，渐变参数似乎是重叠的，而且页面似乎也采用了最后设置的值。
Here's the code and the output I got:这是我得到的代码和输出：
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>
As you can see, .under_banner has top-border property, in fact the repeating-linear-gradient is not symmetric with the background one.如您所见， .under_banner具有top-border属性，实际上repeating-linear-gradient与background不对称。 I'd like to get different gradients for each property just with one div, if possible.如果可能的话，我想只用一个 div 为每个属性获得不同的渐变。
Thank you in advance!先感谢您！
1 个解决方案
解决方案1
1 已采纳 2020-03-06 11:19:32
You can use multiple background:您可以使用多个背景：
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>
Or adjust your code like below, you are simply missing the slice property:或者像下面这样调整你的代码，你只是缺少 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>
Related for more details: border-image-slice for gradient border image有关更多详细信息：渐变边框图像的边框图像切片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.