如何使用 CSS 在顶线和底线中制作颜色模糊的垂直线

Question

正如你从标题中所知道的，我想像这样用 css 做一行。

谁能帮帮我？

非常感谢！ :)

Answer 1

我是这样做的：

.line {
  height: 100px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(white,black,white) 10 stretch;
}

<div class="line">
</div>

你必须玩弄颜色，但结果是一样的。

Answer 2

好了，就是这样：

<!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>

Tacchino Robot 的答案几乎是完美的，添加一些模糊效果，您就完全符合要求了。

如果您对此解决方案感到满意，请将其标记为答案（打勾），以便其他人知道它已解决。谢谢。

如何使用 CSS 在顶线和底线中制作颜色模糊的垂直线

How to make Vertical Line with blured colour in Top and Bottom Line with CSS

html

css

graphics

blur

line