html - 带虚线图案的渐变线

Question

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

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

而且我也知道要实现渐变我需要做的事情:

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

Answer 1

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

但是，您可以在不使用任何额外元素(真实/伪)的情况下通过使用 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) 决定线条的粗细。