Как сделать вертикальную линию с размытым цветом в верхней и нижней линии с помощью CSS - PullRequest
Новая
       17

Как сделать вертикальную линию с размытым цветом в верхней и нижней линии с помощью CSS

0 голосов
/ 23 октября 2019

Как вы знаете из названия, я хочу сделать такую ​​строчку с помощью css вот так.

enter image description here

Кто-нибудь может мне помочь?

Спасибо большое! :)

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Вот, пожалуйста, вот оно: 

<!DOCTYPE html>
<html>

<head>
  <style>
    .verticalLine{
      height: 300px; /* Length of your line */
      border-left: 2px solid transparent;
      filter: blur(1px); /* Amount of bluryness */
      border-image: linear-gradient(white, black, white) 10 stretch;
    }
  </style>
</head>

<body>
  <div class="verticalLine"></div>
</body>

</html>

Ответ робота-такчи почти идеален, добавьте немного размытия, и вы получите именно то, что было запрошено.

Если вы довольныЭто решение, отметьте это как ответ (отметьте галочкой), чтобы другие знали, что оно решено. Спасибо.

0 голосов
/ 23 октября 2019

Я так и сделал: 

.line {
  height: 100px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(white,black,white) 10 stretch;
}
<div class="line">
</div>

Вы должны играть с цветами, но результат примерно такой же.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...