带虚线图案的渐变线

Question

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

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

而且我也知道要实现渐变我需要做：

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

Answer 1

感谢您的帮助，我终于自己搞定了，但是在 div 中嵌入了一条虚线。 <hr/> 具有我想要该行的元素的颜色，给出该行的 "hiding" 部分的效果。这是代码，但是如果有人有好的答案我很好奇。

.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>

jsFiddle

Answer 2

使用pseudo-elements你可以实现dashed-border并且还可以在任何方向自定义它（在我的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 */
  }

希望它对你有用。

Answer 3

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

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

带虚线图案的渐变线

Gradient line with dashed pattern

html

css

linear-gradients