как сделать вертикальные градиентные линии с помощью css

Question

как сделать вертикальные градиентные линии с помощью css

вот мой код:

<div class="pluses">
  <h1>?YN€?µ????N?N‰?µN?N‚???°</h1>
  <p>???°?????? ???±N€?°?·???? ???????°N? ???????µ?»N? ??N€???°?????·?°N†???????????? ???µN?N‚?µ?»N?????N?N‚?? N‚N€?µ?±N?NZN‚ ????N€?µ???µ?»?µ????N? ?? N?N‚??N‡???µ????N? N???N?N‚?µ?? ???°N?N??????????? N?N‡?°N?N‚??N?. ?????µ????N‹?µ N??????±N€?°?¶?µ????N? ??N‹N?N??µ???? ????N€N??????°, ?° N‚?°???¶?µ ???????°N? ???????µ?»N? ??N€???°?????·?°N†???????????? ???µN?N‚?µ?»N?????N?N‚?? ?????·?????»N??µN‚ ??N‹?????»??N?N‚N? ???°?¶??N‹?µ ?·?°???°????N? ???? N€?°?·N€?°?±??N‚???µ ???????µ?»?? N€?°?·????N‚??N?.</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;
}

здесь я пытаюсь сделать вертикальные линии с градиентом, как Вот

но все, что я получаю, - что как я могу решить эту проблему?

html,css,

0

Ответов: 2

HTML, CSS,

Похожие вопросы

score 1 · Answer 1

1 принят

Вы можете перезаписать .plusesкласс где-нибудь в вашем файле CSS, но это должно работать

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

score 0 · Answer 2

0

Попробуй это:

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