我需要创建一条带有线性渐变的虚线。
我设法使用<hr /> 和以下样式创建了一条虚线：
line {
border: 0px;
border-bottom: 2px dashed;
}
而且我也知道要实现渐变，我需要这样做：
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));
【问题讨论】：
标签： html css linear-gradients
感谢您的帮助，我终于自己动手了，但将虚线嵌入到 div 中。 <hr/> 具有我想要线条所在的元素的颜色，从而产生“隐藏”部分线条的效果。这是代码，但是如果有人有一个很好的答案，我很好奇。
.line {
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}
.dashed {
border: 0px;
border-bottom: 2px dashed;
border-color: #223049;
}
<div class="line">
<hr class="dashed"/>
</div>
【讨论】：
使用pseudo-elements，您可以实现虚线边框，并且还可以在任何方向自定义它（在我的JSFiddle中已对一侧进行了描述）。
这是我的JSFiddle
HTML
<div class="dashed-border"></div>
CSS
.dashed-border {
position: relative;
border-bottom: 3px dashed #fff;
}
.dashed-border::before {
content:"";
border-top:3px dashed #FFF;
position: absolute;
top:0;
left:6px;
right:0;
width: 100%;
height: 3px;
z-index: 2;
}
.dashed-border:after {
content:"";
position: absolute;
bottom: -3px;
left: -3px;
}
.dashed-border::after {
right: -3px;
height: 3px;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
}
希望它对你有用。
【讨论】：
根据您自己答案中的代码，您似乎需要一条本身就是渐变（从蓝色到绿色）并且还具有虚线图案的线。这是不可能用一张渐变图像实现的，因为不能在渐变中间引入空间。
但是，您可以在不使用任何额外元素（真实/伪）的情况下通过使用background-image 堆叠来实现相同的效果，如下面的 sn-p：
.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>上述 sn-p 中的第二个渐变与您的答案中的相同（使用最新的标准跨浏览器语法除外）。第一个渐变是您的hr 的替代品，它只不过是一个重复渐变，对于图像宽度的 50% 是透明的，而对于其他 50% 是您需要的颜色。第一个渐变图像的background-size 设置为16px 2px，其中16px 是宽度，2px 是高度。图像的宽度决定了虚线的宽度。高度 (2px) 决定了线条的粗细。
【讨论】：