带有虚线图案的渐变线

Question

我需要创建一个带有线性渐变的虚线.我设法使用<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,其中是16像素的宽度和2px的是高度.图像的宽度决定了破折号的宽度.height(2px)决定了线条的粗细.