带有虚线图案的渐变线

我需要创建一条具有线性渐变的虚线。 我设法使用创建了一条虚线<hr />以及以下样式：

line {
  border: 0px;
  border-bottom: 2px dashed;
}

我也知道要实现渐变，我需要这样做：

background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));

根据您自己答案中的代码，您似乎需要一条本身就是渐变的线（从蓝色到绿色）并且还具有虚线图案。这是不可能用一张渐变图像来实现的，因为不能在渐变中间引入空间。

但是，您可以通过使用以下命令来实现相同的效果，而无需使用任何额外的元素（真实/伪）background-image像下面的代码片段一样堆叠：

.line {
  margin-top: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
  background-size: 16px 2px, 100% 2px;
}

body{
  background-color: #223049;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>

上面代码片段中的第二个渐变与您答案中的第二个渐变相同（除了使用最新标准跨浏览器语法）。第一个渐变是您的替代品hr它只不过是一个重复的渐变，图像宽度的 50% 是透明的，另外 50% 是您需要的颜色。这background-size第一个梯度图像的设置为16px 2px其中 16px 是宽度，2px 是高度。图像的宽度决定了虚线的宽度。高度 （2px) 确定线条的粗细。