如何使用css制作垂直渐变线

Question

here is my code:

<div class="pluses">
  <h1>Преимущества</h1>
  <p>Таким образом новая модель организационной деятельности требуют определения и уточнения систем массового участия. Идейные соображения высшего порядка, а также новая модель организационной деятельности позволяет выполнять важные задания по разработке модели развития.</p>
</div>

.pluses {
padding: 30px;
width: 250px;
float: left;
border-width: 1.5px;
border-style: solid;
border-image: linear-gradient(to top, #e2e2e2, #c2c2c2, #e2e2e2);
border-image-slice: 1;
border-bottom: none;
border-top: none;
}

here I'm trying to make a vertical lines with gradient like

but all I get is how can I solve this problem?

Answer 1

You might by overwriting .pluses class somewhere in your CSS file, but this should work

.pluses {
  padding: 30px;
  width: 250px;
  float: left;
  border: 1.5px solid;
  border-top: 0;
  border-bottom: 0;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 1;
}

Fiddle: https://jsfiddle.net/2jvqn76L/1/

Answer 2

Try this:

.bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

you can get help from here: https://css-tricks.com/examples/GradientBorder/