我试图了解 border-image-slice 在渐变边框图像的情况下如何工作。在规范中，边框图像切片的值可以是一个数字，
表示光栅图像的边缘偏移（以像素为单位）和矢量图像的坐标。对于矢量图像，该数字与元素的大小相关，而不是与源图像的大小相关，因此在这些情况下通常更可取。
border-image: repeating-linear-gradient(45deg,
#000, #000 1.5%,
transparent 1.5%, transparent 5%) 80;
因此，根据规范，80 是相对于 div 的大小（宽度：26em；高度：23em；）。但我还是不明白这是什么意思。当我更改 div 的宽度或高度时，边框图像不会改变其外观。但是当我更改边框图像切片或边框宽度时，外观会发生显着变化。所以看起来数字 80 和边框宽度 5em 之间存在相关性。（数字 40 的边框看起来相同，边框宽度为 2.5em，16 的边框宽度为 1em，等等）。
我的问题是数字 80 是如何计算的，这意味着给定 div 和渐变的切片过程是什么？（如果有草图，我们将不胜感激）而且 80 似乎不是以 px、em 或 % 为单位，因为当我添加这些单位时，外观正在发生变化。
完整代码在这里：
border-image: repeating-linear-gradient(45deg,
#000, #000 1.5%,
transparent 1.5%, transparent 5%) 80;
div {
box-sizing: border-box;
position: relative;
border: solid 5em #000;
border-image: repeating-linear-gradient(45deg,
#000, #000 1.5%,
transparent 1.5%, transparent 5%) 80;
padding: 2em;
width: 26em; height: …我找到了这个答案"css:如何用中间的文字绘制圆圈？" ,但我需要相同,但心形.我在heart网上找到了很多形状数字,但这里没有文字内容.与此同时,我heart只需要带边框,点击时填充背景.
我的代码到现在为止:
.heart {
width: 100px;
height: 90px;
font-size: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after { …