Question

使用重复渐变作为background-repeat: space或background-background: round使用重复渐变作为时，是否可以实现background-image和/或border-image-repeat: space|round之类的效果在FF以外的浏览器中border-image？

这是受Create a perfect dashed line with background-image in CSS的启发，它要求在末尾有一条没有部分破折号的虚线。在这种情况下，background-image是一个图片文件，因此background-size: repeat或background-repeat: round将起作用（具体取决于具体需求）。

但我无法使用linear-gradient或repeating-linear-gradient作为background-image或border-image。只是几个例子：

＆＃13;

div {
  outline: 1px solid red;
  margin-bottom: 40px;
}
#linear-gradient-background-image {
  padding-bottom: 10px;
  background-position: left bottom;
  background-size: 28px 8px;
  background-image: linear-gradient(to right, #000 75%, transparent 0%);
  background-repeat: round no-repeat;
}
#repeating-linear-gradient-border-image {
  padding-bottom: 0;
  border: 0 solid #000;
  border-bottom-width: 8px;
  border-image: repeating-linear-gradient(to right, #000, #000 21px, transparent 22px, transparent 28px) 1;
  border-image-repeat: round;
}

＆＃13;

<div id="linear-gradient-background-image">
  linear-gradient background-image
</div>

<div id="repeating-linear-gradient-border-image">
  repeating-linear-gradient border-image
</div>

＆＃13;

第一个示例（#linear-gradient-background-image）适用于FF。但除此之外，还有一些宽度，在div的右边缘绘制了部分短划线。

在webkit浏览器中，可以看到#linear-gradient-background-image短划线在调整容器大小时进行某种调整，但我不确定它在做什么以及其他什么这不是我所希望的。

重复一次线性渐变（如背景图像或边框图像）整数次

0 个答案: