css - 線形グラデーションを (背景画像または境界画像として) 整数回繰り返します

Question

繰り返しグラデーションを として使用するとき、またはFF 以外のブラウザーで繰り返しグラデーションを として使用するときに、background-repeat: spaceand/orのようなことを達成することは可能ですか?background-background: roundbackground-imageborder-image-repeat: space|roundborder-image

これは、 Create a perfect dashed line with background-image in CSSに触発されたもので、最後に部分的なダッシュのない破線を作成する方法を求めています。その場合、 はbackground-imageイメージ ファイルだったので、background-size: repeatまたはbackground-repeat: roundで動作します (正確なニーズによって異なります)。

linear-gradientしかし、それを aまたはrepeating-linear-gradientasbackground-imageまたは で動作させることはできません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 ダッシュが何らかの調整を行っていることがわかりますが、それが何をしているのかはわかりません。