渐变边界有切片，但仍然只显示角

Question

我添加了边框图像切片，但边框仍然只显示角。当我想把它直接放在条纹边界的上面时，它也显示在条纹边界之外。我做错了什么？

body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
	      padding: 10px;
align-items: center;
		  background: WHITE;
		  display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
	  min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
	      display: flex;
margin: 20px;
		  border-width: 10px;
		  border-style: solid;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
0 2px 6px rgba(0, 0, 0, 0.5),
0 10px rgba(0, 0, 0, 0.05) inset;
		  border-image-slice: 10;
border-image: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'>
Hard Candy by IshikaruTanaka
</div>
</div>

Answer 1

切片需要在border-image之后

body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
border-image-slice: 10;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>

或使用border-image-source

body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image-slice: 10;
border-image-source: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>

border-image是一个包含border-slice的简写属性，因此如果稍后设置它，它将覆盖以前的border-slice

您也可以像使用.border一样仅使用border-image

body {
background-color: BLACK;
background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}
#header {
padding: 10px;
align-items: center;
background: WHITE;
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
min-width: 100%;
}
.border {
position: relative;
z-index: -1;
border: 10px solid #6b36ba;
border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}
.bordershine {
display: flex;
margin: 20px;
border-width: 10px;
border-style: solid;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%) 10;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

<div class="bordershine">
<div id="header" class="border">
<img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
</div>
</div>