用于梯度边界图像边界图像切片

提问者：小点点

用于梯度边界图像边界图像切片

我试图理解在渐变边界图像的情况下，边界图像切片是如何工作的。在规范中，边界图像切片值可以是

表示光栅图像的边缘偏移量（以像素为单位）和矢量图像的坐标。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，百分比通常是更可取的。

在CSS-tricks文章中的示例中，边界图像设置如下:

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，1em的边框宽度为16，等等）。

我的问题是如何计算数字80，这意味着给定div和梯度的切片过程是什么？（一个草图将非常感谢），它似乎80不是在px，em或%，因为当我加入这些单位，外观是改变的。

完整代码如下:

null

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: 23em;
	background: linear-gradient(to right bottom, 
			#e18728, #4472b9);
	background-size: 50% 50%;	
}

<div></div>

null

共2个答案

匿名用户

当使用渐变时，图像的大小就是元素的大小。border-image-width将定义我们将放置切片的9个区域（如果未定义，则使用border-width)。border-image-slice将考虑初始图像来创建切片。将无单位值视为像素值，并根据元素的大小解析百分比值。

为了获得完美的结果，我们应该使切片等于区域，为此，我们需要使border-image-slice等于border-image-width（或border-width)，当不使用单元时。如果使用百分比，则计算出的值应相同。

在您的示例中，切片中的80表示80px，您的边框为5em，即5x16px=80px。

让我们举一个简单的例子。

null

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid transparent;
}

div.box {
  background: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) border-box, red;
}

div.border {
  border-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) 50 fill;
  border-image-width: 50px;
  background: red;
}

<div class="box"></div>

<div class="border"></div>

匿名用户

在下一个例子中，我使用px而不是em，因为我认为这样更清楚。

这是用于边框图像的图像。

null

div{ width: 416px; height: 368px;
	background:repeating-linear-gradient(45deg, 
			#000, #000 1.5%, 
			transparent 1.5%, transparent 5%);
}

<div></div>