渐变背景未覆盖边框图像下方

Question

我希望背景渐变也能覆盖边界下的图像。但听起来好像根本不起作用！我已经意识到，如果我删除Border，它开始在Mozilla中工作，但我希望它在谷歌Chrome中工作。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.cont {
height: 200px;
position: relative;
background-image: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background-clip: border-box;
background-repeat: no-repeat;
border: 20px solid orange;
border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
border-image-slice: 25;
border-image-repeat: round;
border-image-width: 18px;
}
.cont > .insta {
text-align: center;
color: white;
font-size: var(--default-font-size);
margin: 0;
padding: 0;
position: absolute;
width: 80%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}

<div class="cont">
<p class="insta">
Follow us on Instagram
</p>   </div>

Answer 1

您可以将线性梯度作为before伪元素的背景，使其比实际元素大边界的宽度，并分别对其进行定位。然后，它将进入主元素的边界图像下方。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.cont {
height: 200px;
position: relative;
background-clip: border-box;
background-repeat: no-repeat;
border: 20px solid orange;
border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
border-image-slice: 25;
border-image-repeat: round;
border-image-width: 18px;
position: relative;
}
.cont::before {
content: '';
position: absolute;
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
z-index: -1;
background-image: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.cont>.insta {
text-align: center;
color: white;
font-size: var(--default-font-size);
margin: 0;
padding: 0;
position: absolute;
width: 80%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}

<div class="cont">
<p class="insta">
Follow us on Instagram
</p>
</div>