我需要创建一条具有线性渐变的虚线。
我设法使用创建了一条虚线<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) 确定线条的粗细。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
