1

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

这是由Create a perfect dashed line with background-image in CSS启发而来的，它要求一种在最后没有部分破折号的虚线的方法。在这种情况下，它background-image是一个图像文件，因此background-size: repeat或background-repeat: round将起作用（取决于确切的需要）。

但我不能让它与 a linear-gradientor repeating-linear-gradientas background-imageor 一起使用border-image。举几个例子：

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;
}
<div id="linear-gradient-background-image">
  linear-gradient background-image
</div>

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

第一个示例 ( #linear-gradient-background-image) 在 FF 中有效。但除此之外，在div.

在 webkit 浏览器中，#linear-gradient-background-image当容器调整大小时，可以看到 's dash 进行了某种调整，但我不确定它在做什么，无论它是什么都不是我所希望的。

4

0 回答 0