带有虚线图案的渐变线

问题描述

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

  line {
 border：0px; 
 border-bottom：2px虚线; 
} 
  

我也知道要实现我需要做的渐变： （白色）到（黑色））; -bb

 背景：-webkit-gradient（线性，0 0，100％0， 
  

解决方案

根据您自己的答案中的代码，就像你需要一条线，它本身是一个渐变线（从蓝色到绿色），也有虚线模式。这是不可能实现的一个渐变图像，因为空间不能在梯度中间引入。

但是，您可以实现相同的效果，而不使用任何额外的元素（真实/伪）通过使用 background-image 堆叠，如下面的代码片段所示：

.line {margin-top：50px; height：2px;背景：线性渐变（向右，透明50％，＃223049 50％），线性渐变（向右，＃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 ）决定线条的粗细。

I need to create a dashed line with a linear gradient.I managed to create a dashed line using <hr /> and the following styling:

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

And I also know that to achieve a gradient I need to do:

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

解决方案

Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient.

However, you can achieve the same effect without using any extra elements (real/pseudo) by using background-image stacking like in the below snippet:

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

The second gradient in the above snippet is the same as the one in your answer (except the usage of the latest standard cross-browser syntax). The first gradient is the replacement for your hr and it is nothing but a repeating gradient which is transparent for 50% of image's width and the color you need for the other 50%. The background-size of the first gradient image is set as 16px 2px where 16px is the width and 2px is the height. The width of the image determines the width of the dashes. The height (2px) determines the thickness of the line.

这篇关于带有虚线图案的渐变线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！