Gradient line with dashed pattern

问题

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));

回答1:

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.

回答2:

Thanks for help I finally got it working myself but embedding a dashed line into a div. The <hr/> has the colour of the element I want the line in, giving the effect of "hiding" part of the line. Here is the code, however if someone has a nice answer I'm curious.

.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

回答3:

Using pseudo-elements you can achieve dashed-border and can customize it also, in any direction(have described for one side in my JSFiddle).

Here's my 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 */
  }

Hope it will work for you.

来源：https://stackoverflow.com/questions/32500570/gradient-line-with-dashed-pattern

标签

html

css

css3

linear-gradients