如何用css制作垂直渐变线

Question

这是我的代码：

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

这里我尝试使用像

这样的渐变来制作垂直线条

但我得到的只是 我该如何解决这个问题？

Answer 1

您可能会在CSS文件中的某处覆盖.pluses类，但这应该可以正常工作

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

小提琴：https://jsfiddle.net/2jvqn76L/1/

Answer 2

试试这个：

.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%;
}

您可以从此处获得帮助：https://css-tricks.com/examples/GradientBorder/