虚线虚线

Ela 发表于 Dev

她

我需要创建带有线性渐变的虚线。我设法使用<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）确定线的粗细。